(
// 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: () =>
+
+ // 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: () =>
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 (
-
-
-
-
- test
-
- )
- },
+ // component
+ return () => {
+ return (
+
+
+
+
+ test
+
+ )
}
},
ssr: false,
diff --git a/test/development/basic/next-dynamic/components/nested2.js b/test/development/basic/next-dynamic/components/nested2.js
index 085512318d09dc8..830079c90fe4558 100644
--- a/test/development/basic/next-dynamic/components/nested2.js
+++ b/test/development/basic/next-dynamic/components/nested2.js
@@ -1,12 +1,9 @@
// import { lazy } from 'react'
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/next-dynamic/pages/dynamic/head.js b/test/development/basic/next-dynamic/pages/dynamic/head.js
index 3d1535a164eb577..4fe4224787a6426 100644
--- a/test/development/basic/next-dynamic/pages/dynamic/head.js
+++ b/test/development/basic/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 (
-
-
-
-
- test
-
- )
- },
+ // component
+ return () => {
+ return (
+
+
+
+
+ test
+
+ )
}
},
ssr: false,
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server-import-client.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server-import-client.js
new file mode 100644
index 000000000000000..b3d6e38d98ef49a
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server-import-client.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const Dynamic = dynamic(() => import('../text-dynamic-server-import-client'))
+
+export function NextDynamicServerImportClientComponent() {
+ return
+}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server.js
index 267a1febc5daac3..faa43eee0e4b205 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-server.js
@@ -1,6 +1,7 @@
import dynamic from 'next/dynamic'
const Dynamic = dynamic(() => import('../text-dynamic-server'), {
+ // This ssr option will be ignored in server component
ssr: false,
})
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/react-lazy-client.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/react-lazy-client.js
index e8010fd28c73ba5..309032ccbd5640f 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/react-lazy-client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/react-lazy-client.js
@@ -2,7 +2,7 @@
import { useState, lazy } from 'react'
-const Lazy = lazy(() => import('../text-lazy-client.js'))
+const Lazy = lazy(() => import('../text-lazy-client'))
export function LazyClientComponent() {
let [state] = useState('use client')
diff --git a/test/e2e/app-dir/app/app/dashboard/index/page.js b/test/e2e/app-dir/app/app/dashboard/index/page.js
index c946b76e18cc95d..116ef7743d080bb 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/page.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/page.js
@@ -1,6 +1,7 @@
import { LazyClientComponent } from './dynamic-imports/react-lazy-client'
import { NextDynamicServerComponent } from './dynamic-imports/dynamic-server'
import { NextDynamicClientComponent } from './dynamic-imports/dynamic-client'
+import { NextDynamicServerImportClientComponent } from './dynamic-imports/dynamic-server-import-client'
export default function DashboardIndexPage() {
return (
@@ -9,6 +10,7 @@ export default function DashboardIndexPage() {
+
)
}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/text-dynamic-server-import-client.js b/test/e2e/app-dir/app/app/dashboard/index/text-dynamic-server-import-client.js
new file mode 100644
index 000000000000000..c43df85edec4979
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/index/text-dynamic-server-import-client.js
@@ -0,0 +1,9 @@
+'use client'
+
+export default function ClientImportedByServer() {
+ return (
+
+ hello from server import client
+
+ )
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 3bf7b92d542f8a7..9365e47c25c0fa7 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -143,6 +143,7 @@ describe('app dir', () => {
// should support `dynamic` in both server and client components
expect(html).toContain('hello from dynamic on server')
expect(html).toContain('hello from dynamic on client')
+ expect(html).toContain('hello from server import client')
})
it('should serve polyfills for browsers that do not support modules', async () => {