React: Using React.lazy for dynamic import crashes react app.

[adityaloshali]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When i use React.lazy to dynamic import like, const Calendar = React.lazy(() => import('../Calendar/index')) . the app crashes with the following error message:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

However, if i use my own lazyImport component like: lazyComponent(() => import('../Calendar/index'))., then the dynamic import and code splitting works fine.

Code for my lazyImport implementation: Lazy Component

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

using React.lazy(() => import('../Calendar/index')) instead of lazyComponent(() => import('../Calendar/index')).

What is the expected behavior?

React.lazy(() => import('../Calendar/index')) should work fine as i've checked for the presence of required Webpack setup and babel plugin.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I encounter this issue in React 16.6. i've never used React.lazy before.
Webpack and Babel files: my webpack and babel configuration

[nmain]

Without seeing your code I can't be sure, but if your component was originally
import Calendar from "../Calendar/index" then the corresponding async import would be React.lazy(() => import("../Calendar/index").default). This has nothing to do with React and is simply how async imports work with default exports.

[adityaloshali]

@nmain I tried this way React.lazy(() => import("../Calendar/index").default) after your comment, but this did'nt work either, same issue . I could not find this example for default export int the React Docs Lazy because there it says that default exports are supported and the examples do not include .default at the end. please refer me to the link if i missed something. and if it is not present, can we please have such example there ? .
Thanks.

[kunukn]

How do you export? export default ComponaneName? module.exports = ComponentName?

If you read through these answers from this Stackoverflow post, then the error suggest that people either mistype the path, mixed up named import or default import. Wrong component declaration. e.g. const Hello = <div>Hello</div> Maybe same thing could be happening here?

https://stackoverflow.com/q/34130539/815507

It is hard to debug without knowing the content of Calendar/index or being able to reproduce the error. Would you mind sharing a git repo or codesandbox demo?

[threepointone]

@adityaloshali try this instead -

React.lazy(() => import("../Calendar/index").then(x => x.default))

[adityaloshali]

@threepointone Sorry for replying so late. was visiting my parents. and thanks a lot, this one works.
i was unable to find and such example on react docs though. they were all lik React.lazy(() => import('component path')), but none with .deafult or .then(x => x.default).

please direct me towards any such mention in docs, if i missed it. Thanks

[adityaloshali]

@kunukn i export it like export default ComponaneName. sorry, can't share the repo or code though. it's a production code and i have a NDA with the company.

[gaearon]

You shouldn't need to do anything like .then(x => x.default). React already does that, as docs correctly point out.

We can't guess what's going wrong in your code without seeing a minimal reproducing example, unfortunately. Since this is working for everyone else, there must be something wrong in your setup. This issue isn't actionable for us without a reproducing case so I'll have to close, unfortunately.

One possible reason might be that you're using a version of react-dom that doesn't support lazy yet, e.g. 16.5 or earlier. Make sure both react and react-dom have the same version.

[adityaloshali]

@gaearon Thanks ! for sharing the info Dan.

[ankitskvmdam]

@adityaloshali are you importing and using Suspense or not?

import React, {lazy, Suspense} from "react"
const Calender = lazy(() => import("../Calender/index")

<Suspense fallback = {<div> Loading...</div>} >
       <Calender />
</Suspense>

[Lionberg]

these examples does not work for me.
I do exactly how it is written in examples, and how @ankitskvmdam wrote, but I get error: The above error occurred in one of your React components: in Unknown...
And I have no idea what to do about. I just simply does not work!

[chriscamplin]

@Lionberg installing @babel/plugin-syntax-dynamic-import fixed this for me

[tjshipe]

I was getting this same error until I wrapped the React.lazy component with <Suspense>. Is Suspense required for React.lazy()?