diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.js b/packages/react-reconciler/src/ReactFiberLazyComponent.js index cae98e4a1f599..5bfa10dbc3c75 100644 --- a/packages/react-reconciler/src/ReactFiberLazyComponent.js +++ b/packages/react-reconciler/src/ReactFiberLazyComponent.js @@ -48,22 +48,24 @@ export function readLazyComponentType(lazyComponent: LazyComponent): T { const ctor = lazyComponent._ctor; const thenable = ctor(); thenable.then( - moduleObject => { + resolvedComponent => { if (lazyComponent._status === Pending) { - const defaultExport = moduleObject.default; + if (resolvedComponent.default) { + resolvedComponent = resolvedComponent.default; + } if (__DEV__) { - if (defaultExport === undefined) { + if (resolvedComponent === undefined) { warning( false, - 'lazy: Expected the result of a dynamic import() call. ' + + 'lazy: Expected a promise that resolves to a React component. ' + 'Instead received: %s\n\nYour code should look like: \n ' + "const MyComponent = lazy(() => import('./MyComponent'))", - moduleObject, + resolvedComponent, ); } } lazyComponent._status = Resolved; - lazyComponent._result = defaultExport; + lazyComponent._result = resolvedComponent; } }, error => { diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index 80639c8831ba6..9299203feb839 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js @@ -102,9 +102,7 @@ describe('ReactLazy', () => { expect(root).toMatchRenderedOutput('FooBar'); }); - it('does not support arbitrary promises, only module objects', async () => { - spyOnDev(console, 'error'); - + it('supports named imports', async () => { const LazyText = lazy(async () => Text); const root = ReactTestRenderer.create( @@ -115,18 +113,14 @@ describe('ReactLazy', () => { unstable_isConcurrent: true, }, ); + expect(root).toFlushAndYield(['Loading...']); expect(root).toMatchRenderedOutput(null); await Promise.resolve(); - if (__DEV__) { - expect(console.error).toHaveBeenCalledTimes(1); - expect(console.error.calls.argsFor(0)[0]).toContain( - 'Expected the result of a dynamic import() call', - ); - } - expect(root).toFlushAndThrow('Element type is invalid'); + expect(root).toFlushAndYield(['Hi']); + expect(root).toMatchRenderedOutput('Hi'); }); it('throws if promise rejects', async () => {