From d217c24dbd7f51f44ec1afc6582a5aeeeb983c80 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Tue, 6 Dec 2022 12:54:30 +0100 Subject: [PATCH] backward compatible for loader and support import client component for server component --- packages/next/shared/lib/dynamic.tsx | 11 ++++- .../next-dynamic/components/nested2.js | 9 ++--- .../next-dynamic/pages/dynamic/head.js | 40 +++++++++---------- .../basic/next-dynamic/components/nested2.js | 9 ++--- .../basic/next-dynamic/pages/dynamic/head.js | 40 +++++++++---------- .../dynamic-server-import-client.js | 7 ++++ .../index/dynamic-imports/dynamic-server.js | 1 + .../dynamic-imports/react-lazy-client.js | 2 +- .../app-dir/app/app/dashboard/index/page.js | 2 + .../text-dynamic-server-import-client.js | 9 +++++ test/e2e/app-dir/index.test.ts | 1 + 11 files changed, 75 insertions(+), 56 deletions(-) create mode 100644 test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server-import-client.js create mode 100644 test/e2e/app-dir/app/app/dashboard/index/text-dynamic-server-import-client.js diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx index 456b7dc458f014f..4a39705f0ceb9c7 100644 --- a/packages/next/shared/lib/dynamic.tsx +++ b/packages/next/shared/lib/dynamic.tsx @@ -88,7 +88,7 @@ export default function dynamic

( // 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 (process.env.NODE_ENV !== 'production') { if (isLoading) { return null } @@ -123,6 +123,15 @@ export default function dynamic

( // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () =>

Loading something

}) loadableOptions = { ...loadableOptions, ...options } + const loader = loadableOptions.loader as Loader

+ + // Normalize loader to return the module as form { default: Component } for `React.lazy`. + // Also for backward compatible since next/dynamic allows to resolve a component directly with loader + loadableOptions.loader = () => + loader().then((mod) => { + return { default: mod.default || mod } + }) + // coming from build/babel/plugins/react-loadable-plugin.js if (loadableOptions.loadableGenerated) { loadableOptions = { diff --git a/test/development/basic-basepath/next-dynamic/components/nested2.js b/test/development/basic-basepath/next-dynamic/components/nested2.js index b9b2c982b108a8d..8fe2f1ce0a6842a 100644 --- a/test/development/basic-basepath/next-dynamic/components/nested2.js +++ b/test/development/basic-basepath/next-dynamic/components/nested2.js @@ -1,11 +1,8 @@ import dynamic from 'next/dynamic' -const BrowserLoaded = dynamic( - async () => ({ default: () =>

Browser hydrated
}), - { - ssr: false, - } -) +const BrowserLoaded = dynamic(async () => () =>
Browser hydrated
, { + ssr: false, +}) export default () => (
diff --git a/test/development/basic-basepath/next-dynamic/pages/dynamic/head.js b/test/development/basic-basepath/next-dynamic/pages/dynamic/head.js index 3d1535a164eb577..4fe4224787a6426 100644 --- a/test/development/basic-basepath/next-dynamic/pages/dynamic/head.js +++ b/test/development/basic-basepath/next-dynamic/pages/dynamic/head.js @@ -3,27 +3,25 @@ import Head from 'next/head' const Test = dynamic({ loader: async () => { - // component module - return { - default: () => { - return ( -
- -