title: fullcalendar - NextJS - Dynamic import doesn't show calendar
body: <p>I'm using NextJS and Fullcalendar.</p>
  <p>I tried to use <code>fullcalendar</code> using dynamic import like in <a href="https://www.davidangulo.xyz/how-to-use-fullcalendar-in-next-js/" rel="noreferrer">this example</a>(for more info, this example solution comes from <a href="https://spectrum.chat/next-js/general/using-fullcalendar-with-next-js%7E6800b0f7-a423-4916-8a60-356c9b1b9ff4" rel="noreferrer">here</a>).</p>
  <p>It worked, But there was a problem. Almost every 1 out of 5 refreshing attempts ended in error <code>Please import the top-level fullcalendar lib before attempting to import a plugin</code> (<a href="https://stackoverflow.com/questions/63356915/fullcalendar-please-import-the-top-level-fullcalendar-lib-before-attempting-t">like this</a>, but versions are correct in my case)</p>
  <p>After that, I found out that the modules option for next/dynamic has been deprecated. I thought it was a source of my problem (I'm not sure 100%, but at least it was deprecated and needed to be updated).</p>
  <p>As <a href="https://nextjs.org/docs/advanced-features/dynamic-import" rel="noreferrer">docs</a> says, newer way to handle dynamic imports is like this:</p>
  <pre class="lang-js prettyprint-override"><code>const DynamicComponent = dynamic(() =&gt;
    import('../components/hello').then((mod) =&gt; mod.Hello)
  )
  </code></pre>
  <p>But because we need multiple imports I found <a href="https://github.com/vercel/next.js/discussions/13139" rel="noreferrer">this solution</a>.</p>
  <p>For now, It seems like everything should be working, but my code has no effect.</p>
  <pre class="lang-js prettyprint-override"><code>import dynamic from &quot;next/dynamic&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  
  import &quot;@fullcalendar/common/main.css&quot;; // @fullcalendar/react imports @fullcalendar/common
  import &quot;@fullcalendar/daygrid/main.css&quot;; // @fullcalendar/timegrid imports @fullcalendar/daygrid
  import &quot;@fullcalendar/timegrid/main.css&quot;; // @fullcalendar/timegrid is a direct import
  import &quot;./Fullcalendar.module.scss&quot;;
  let CalendarComponent;
  
  const Calendar = dynamic(() =&gt;
    import(&quot;@fullcalendar/react&quot;).then((module) =&gt; module.Calendar)
  );
  const dayGridPlugin = dynamic(() =&gt;
    import(&quot;@fullcalendar/daygrid&quot;).then((module) =&gt; module.dayGridPlugin)
  );
  
  export default function FullCalendar(props) {
    const [calendarLoaded, setCalendarLoaded] = useState(false);
  
    useEffect(() =&gt; {
      CalendarComponent = () =&gt; (
        &lt;Calendar
          {...props}
          plugins={[dayGridPlugin]}
          initialView=&quot;dayGridMonth&quot;
        /&gt;
      );
      setCalendarLoaded(true);
    }, []);
  
    let showCalendar = (props) =&gt; {
      if (!calendarLoaded) return &lt;div&gt;Loading ...&lt;/div&gt;;
      return &lt;CalendarComponent {...props} /&gt;;
    };
  
    return &lt;div&gt;{showCalendar(props)}&lt;/div&gt;;
  }
  </code></pre>
  <p>I also find another way to use <a href="https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/next" rel="noreferrer">next transpile modules</a>.
  But they say that <code>&quot;there is currently no way to transpile only parts of a package, it's all or nothing&quot;</code>.</p>
  <p>In fact, I have something in <code>next.config.js</code>. Editing this file into transpile modules is another mysterious adventure, full of problems.</p>
  <p>What should I have to do?</p>