title: Invalid suspense option usage in next/dynamic
body: <p>I have a loader component and I want it to appear while my page is rendering.
  According to the <a href="https://nextjs.org/docs/advanced-features/dynamic-import" rel="nofollow noreferrer">docs</a>, when using suspense my code should look like this</p>
  <pre><code>const DynamicLazyComponent = dynamic(() =&gt; import('../components/loader'), {
      suspense: true,
  })
  
  function MyApp({ Component, pageProps }) {
      return (
          &lt;&gt;
              &lt;Suspense fallback={`loading`}&gt;
                  &lt;DynamicLazyComponent /&gt;
                  ...some code here...
              &lt;/Suspense&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>But I end up with an error that says</p>
  <blockquote>
  <p>Invalid suspense option usage in next/dynamic. Read more:
  <a href="https://nextjs.org/docs/messages/invalid-dynamic-suspense" rel="nofollow noreferrer">https://nextjs.org/docs/messages/invalid-dynamic-suspense</a></p>
  </blockquote>
  <p>I'm sure I followed what the docs stated, but I'm not sure as to why I'm getting these errors.</p>