fix: also warns suspense and loading

SukkaW · Aug 18, 2022 · 8698929 · 8698929
1 parent 9f52614
commit 8698929
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/errors/invalid-dynamic-suspense.md b/errors/invalid-dynamic-suspense.md
@@ -4,6 +4,7 @@
 
 - You are using `{ suspense: true }` with React version older than 18.
 - You are using `{ suspense: true, ssr: false }`.
+- You are using `{ suspense: true, loading }`.
 
 #### Possible Ways to Fix It
 
@@ -19,6 +20,12 @@ Next.js will use `React.lazy` when `suspense` is set to true. React 18 or newer
 - You should write code that works in both client-side and server-side.
 - If rewriting the code is not an option, remove `{ suspense: true }` from `next/dynamic` usages.
 
+**If you are using `{ suspense: true, loading }`**
+
+Next.js will use `React.lazy` when `suspense` is set to true, when your dynamic-imported component is loading, React will use the closest suspense boundary's fallback.
+
+You should remove `loading` from `next/dynamic` usages, and use `<Suspense />`'s `fallback` prop.
+
 ### Useful Links
 
 - [Dynamic Import Suspense Usage](https://nextjs.org/docs/advanced-features/dynamic-import#with-suspense)
diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx
@@ -112,18 +112,29 @@ export default function dynamic<P = {}>(
     )
   }
 
-  /**
-   * TODO: Currently, next/dynamic will opt-in to React.lazy if { suspense: true } is used
-   * React 18 will always resolve the Suspense boundary on the server-side, effectively ignoring the ssr option
-   *
-   * In the future, when React Suspense with third-party libraries is stable, we can implement a custom version of
-   * React.lazy that can suspense on the server-side while only loading the component on the client-side
-   */
-  if (loadableOptions.ssr === false && loadableOptions.suspense) {
-    loadableOptions.ssr = true
-    console.warn(
-      `"ssr: false" is ignored by next/dynamic because you can not enable "suspense" while disabling "ssr" at the same time. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
-    )
+  if (process.env.NODE_ENV !== 'production') {
+    if (loadableOptions.suspense) {
+      /**
+       * TODO: Currently, next/dynamic will opt-in to React.lazy if { suspense: true } is used
+       * React 18 will always resolve the Suspense boundary on the server-side, effectively ignoring the ssr option
+       *
+       * In the future, when React Suspense with third-party libraries is stable, we can implement a custom version of
+       * React.lazy that can suspense on the server-side while only loading the component on the client-side
+       */
+      if (loadableOptions.ssr === false) {
+        loadableOptions.ssr = true
+        console.warn(
+          `"ssr: false" is ignored by next/dynamic because you can not enable "suspense" while disabling "ssr" at the same time. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
+        )
+      }
+
+      if (loadableOptions.loading != null) {
+        loadableOptions.loading = undefined
+        console.warn(
+          `"loading" is ignored by next/dynamic because you have enabled "suspense". Place your loading element in your suspense boundary's "fallback" prop instead. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
+        )
+      }
+    }
   }
 
   // coming from build/babel/plugins/react-loadable-plugin.js