React.lazy warning

Question

// project/src/App.js
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {NavBar, Loading} from "./components";
import './index.css';

const Home = lazy(() => import('./components/home'));

function App() {
    return (
        <Router>
            <NavBar/>
            <Suspense fallback={<Loading/>}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    ...
                </Switch>
            </Suspense>
        </Router>
    );
}

export default App;

Other file.

// project/src/components/Home.js
import React from "react";

const Home = () => (
    <div className="home">
       ...
    </div>
);

export default Home;

The code works but () => import('./components/home') generates this warning:

Argument type function(): Promise<{readonly default?: function(): any}> is not assignable to parameter type () => Promise<{default: ComponentType}> Type Promise<{readonly default?: function(): any}> is not assignable to type Promise<{default: ComponentType}>

I have already read the other topics and none of them work. Thank you.

isn't default import from "react" is React? Try to rename your lazy to React, and do React.lazy — Alex Shtromberg, Sep 23 '21 at 07:10
"isn't default import from "react" is React? Try to rename your lazy to React, and do React.lazy" tried, it doesn't work. — Lorenzo Appetito, Sep 23 '21 at 08:28
Just edited my answer for the error you're getting, check the stackoverflow answer — Uchechukwu Nwafor, Sep 23 '21 at 08:43

Uchechukwu Nwafor · Answer 1 · 2021-09-23T08:42:17.950

2

lazy is not a default export from React. Try wrap it in curly braces like so:

import {lazy} from "react";

Here's how it's used

And incase it's Typescript shouting at you, check this

edited Sep 23 '21 at 08:42

answered Sep 23 '21 at 07:16

Uchechukwu Nwafor

420
4
10

I am not using Typescript, but still I found the solution in that link. Reinier Garcia wrote: "https://stackoverflow.com/a/69180398/16981988" – Lorenzo Appetito Sep 26 '21 at 21:08

score 0 · Accepted Answer · answered Sep 26 '21 at 21:12

0

Although I don't like to complicate things, to remove that warning you have to use this syntax:

const Home = lazy(() => import('./components/Home').then(({default: Home}) => ({default: Home})));

answered Sep 26 '21 at 21:12

Lorenzo Appetito

21
4

React.lazy warning

2 Answers2