}
@@ -52,6 +44,12 @@ export type LoadableFn = (
export type LoadableComponent
= React.ComponentType
+function DynamicThrownOnServer() {
+ const error = new Error('next/dynamic with noSSR on server')
+ ;(error as any).digest = NEXT_DYNAMIC_NO_SSR_CODE
+ throw error
+}
+
export function noSSR
(
_LoadableInitializer: LoadableFn
,
loadableOptions: DynamicOptions
@@ -60,12 +58,12 @@ export function noSSR
(
delete loadableOptions.webpack
delete loadableOptions.modules
- const NoSSRComponent =
+ const loader =
typeof window === 'undefined'
- ? ((() => {
- throw new NextDynamicNoSSRError()
- }) as React.FunctionComponent
)
- : React.lazy(loadableOptions.loader as LazyComponentLoader
)
+ ? async () => ({ default: DynamicThrownOnServer })
+ : loadableOptions.loader
+
+ const NoSSRComponent = React.lazy(loader as Loader)
const Loading = loadableOptions.loading!
const fallback = (
@@ -74,8 +72,9 @@ export function noSSR(
return () => (
- {/* @ts-ignore TODO: fix typing */}
-
+
+
+
)
}
diff --git a/packages/next/shared/lib/loadable.js b/packages/next/shared/lib/loadable.js
index 4df5d11263e7019..94d2a248f809c1b 100644
--- a/packages/next/shared/lib/loadable.js
+++ b/packages/next/shared/lib/loadable.js
@@ -23,6 +23,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
import React from 'react'
import { LoadableContext } from './loadable-context'
+import DynamicBoundary from './dynamic-error-boundary'
const ALL_INITIALIZERS = []
const READY_INITIALIZERS = []
@@ -129,7 +130,11 @@ function createLoadableComponent(loadFn, options) {
{
fallback: fallbackElement,
},
- React.createElement(opts.lazy, props)
+ React.createElement(
+ DynamicBoundary,
+ null,
+ React.createElement(opts.lazy, props)
+ )
)
}
diff --git a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-client.js b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-client.js
index bfa17f6a14b6761..e975ee3565ffb6a 100644
--- a/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-client.js
+++ b/test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-client.js
@@ -2,7 +2,9 @@
import dynamic from 'next/dynamic'
-const Dynamic = dynamic(() => import('../text-dynamic-client'))
+const Dynamic = dynamic(() => import('../text-dynamic-client'), {
+ ssr: false,
+})
export function NextDynamicClientComponent() {
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..665da40efa5d2a5 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,8 +1,6 @@
import dynamic from 'next/dynamic'
-const Dynamic = dynamic(() => import('../text-dynamic-server'), {
- ssr: false,
-})
+const Dynamic = dynamic(() => import('../text-dynamic-server'))
export function NextDynamicServerComponent() {
return