React Lazy - Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.

I am trying to code split with React lazy and get error:

Element type is invalid. Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.

import React, { lazy, Suspense } from 'react'
import * as ReactDOM from 'react-dom'

const Foo = React.lazy(() => import('./foo/foo'))

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Foo />
      </Suspense>
    </div>
  )
}

repo: https://github.com/jcmoore0/react-lazy-fuse/tree/master/src

Is this method supported? Fusebox V4 is fantastic. Thanks!

Issue Analytics

State:
Created 4 years ago
Comments:16 (7 by maintainers)

Top GitHub Comments

11reactions

Krak86commented, Jul 30, 2020

According to React documentation route-based-code-splitting:

React.lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don’t pull in unused components.

So you should do the next steps, for not default modules

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

For me it helps.

6reactions

nchangedcommented, Sep 25, 2019

@jcmoore0 thanks 😉 I think it clearly states the error.

Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function.

const Foo = React.lazy( async () => (await import('./foo/foo').MyComponent )

or default as you wish. I am closing this issue since it’s obvious. You can also try react-universal example

Top Results From Across the Web

javascript - Received a promise that resolves to: undefined ...

Element type is invalid. Received a promise that resolves to: undefined. Promise elements must resolve to a class or function. This is SibaCard ......

element type is invalid. received a promise that resolves to

Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function. import React, { lazy, Suspense...

(React) Element type is invalid, expected a string (for built in ...

To solve the error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got",...

Lazy Element Type Must Resolve To A Class Or Function (In ...

Received a promise that resolves to: [object Promise]. Lazy element type must resolve to a class or function. import React, { lazy, Suspense...

lazy - React Docs

You need to return a Promise or some other thenable (a Promise-like object with a then method). It needs to eventually resolve to...