diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx
index 84d3853eb09a64..b3a5adeb253c66 100644
--- a/packages/next/shared/lib/dynamic.tsx
+++ b/packages/next/shared/lib/dynamic.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Suspense } from 'react'
import Loadable from './loadable'
const isServerSide = typeof window === 'undefined'
@@ -9,7 +9,7 @@ export type LoaderComponent
= Promise<
export type Loader
= (() => LoaderComponent
) | LoaderComponent
-export type LoaderMap = { [mdule: string]: () => Loader }
+export type LoaderMap = { [module: string]: () => Loader }
export type LoadableGeneratedOptions = {
webpack?(): any
@@ -44,22 +44,32 @@ export type LoadableFn = (
export type LoadableComponent
= React.ComponentType
export function noSSR
(
- LoadableInitializer: LoadableFn
,
+ _LoadableInitializer: LoadableFn
,
loadableOptions: DynamicOptions
): React.ComponentType
{
// Removing webpack and modules means react-loadable won't try preloading
delete loadableOptions.webpack
delete loadableOptions.modules
- // This check is necessary to prevent react-loadable from initializing on the server
- if (!isServerSide) {
- return LoadableInitializer(loadableOptions)
- }
+ const NoSSRComponent = React.lazy(
+ (isServerSide
+ ? async () => ({ default: () => null })
+ : loadableOptions.loader) as () => Promise<{
+ default: React.ComponentType
+ }>
+ )
const Loading = loadableOptions.loading!
- // This will only be rendered on the server side
+
return () => (
-
+
+ }
+ >
+ {/* @ts-ignore */}
+
+
)
}
diff --git a/packages/next/shared/lib/loadable.js b/packages/next/shared/lib/loadable.js
index 404cc1b3826418..4df5d11263e701 100644
--- a/packages/next/shared/lib/loadable.js
+++ b/packages/next/shared/lib/loadable.js
@@ -61,15 +61,12 @@ function createLoadableComponent(loadFn, options) {
timeout: null,
webpack: null,
modules: null,
- // suspense: false,
},
options
)
opts.lazy = React.lazy(opts.loader)
- console.log('opts', opts)
-
/** @type LoadableSubscription */
let subscription = null
function init() {
@@ -118,8 +115,7 @@ function createLoadableComponent(loadFn, options) {
})
}
}
-
- function LoadableComponent(props, ref) {
+ function LoadableComponent(props) {
useLoadableModule()
const fallbackElement = React.createElement(opts.loading, {
@@ -133,14 +129,14 @@ function createLoadableComponent(loadFn, options) {
{
fallback: fallbackElement,
},
- React.createElement(opts.lazy, { ...props, ref })
+ React.createElement(opts.lazy, props)
)
}
LoadableComponent.preload = () => init()
LoadableComponent.displayName = 'LoadableComponent'
- return React.forwardRef(LoadableComponent)
+ return LoadableComponent
}
class LoadableSubscription {
diff --git a/test/development/basic/next-dynamic/components/nested2.js b/test/development/basic/next-dynamic/components/nested2.js
index 8fe2f1ce0a6842..085512318d09dc 100644
--- a/test/development/basic/next-dynamic/components/nested2.js
+++ b/test/development/basic/next-dynamic/components/nested2.js
@@ -1,8 +1,12 @@
+// import { lazy } from 'react'
import dynamic from 'next/dynamic'
-const BrowserLoaded = dynamic(async () => () =>
Browser hydrated
, {
- ssr: false,
-})
+const BrowserLoaded = dynamic(
+ async () => ({ default: () => Browser hydrated
}),
+ {
+ ssr: false,
+ }
+)
export default () => (