diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx index 6e7dc8fa2290cb3..b79caf271dc4fca 100644 --- a/packages/next/shared/lib/dynamic.tsx +++ b/packages/next/shared/lib/dynamic.tsx @@ -65,29 +65,33 @@ export default function dynamic

( options?: DynamicOptions

): React.ComponentType

{ let loadableFn: LoadableFn

= Loadable - let loadableOptions: LoadableOptions

= { - // A loading component is not required, so we default it - loading: ({ error, isLoading, pastDelay }) => { - if (!pastDelay) return null - if (process.env.NODE_ENV === 'development') { - if (isLoading) { + + let loadableOptions: LoadableOptions

= options?.suspense + ? {} + : // only provide a default loading component when suspense is disabled + { + // A loading component is not required, so we default it + loading: ({ error, isLoading, pastDelay }) => { + if (!pastDelay) return null + if (process.env.NODE_ENV === 'development') { + if (isLoading) { + return null + } + if (error) { + return ( +

+ {error.message} +
+ {error.stack} +

+ ) + } + } + return null - } - if (error) { - return ( -

- {error.message} -
- {error.stack} -

- ) - } + }, } - return null - }, - } - // Support for direct import(), eg: dynamic(import('../hello-world')) // Note that this is only kept for the edge case where someone is passing in a promise as first argument // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world')) @@ -112,8 +116,8 @@ export default function dynamic

( ) } - if (process.env.NODE_ENV !== 'production') { - if (loadableOptions.suspense) { + if (loadableOptions.suspense) { + if (process.env.NODE_ENV !== 'production') { /** * 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 @@ -122,19 +126,20 @@ export default function dynamic

( * 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` ) } } + + delete loadableOptions.ssr + delete loadableOptions.loading } // coming from build/babel/plugins/react-loadable-plugin.js diff --git a/test/integration/next-dynamic/test/index.test.js b/test/integration/next-dynamic/test/index.test.js index e0c8f9be9ae73cd..b926fdfca98aa1b 100644 --- a/test/integration/next-dynamic/test/index.test.js +++ b/test/integration/next-dynamic/test/index.test.js @@ -31,6 +31,12 @@ function runTests() { // Failure case is 'Index3' expect(text).toBe('Index12344') expect(await browser.eval('window.caughtErrors')).toBe('') + + // should not print "invalid-dynamic-suspense" warning in browser's console + const logs = (await browser.log()).map((log) => log.message).join('\n') + expect(logs).not.toContain( + 'https://nextjs.org/docs/messages/invalid-dynamic-suspense' + ) }) }