CODEWITHSUNDEEP
javascriptreactjstypescript
Rudenya
Rudenya

Reputation: 27

TypeScript + React.Lazy

const Game = React.lazy(() => new Promise( (resolve) => {
    setTimeout( () => resolve(import('./Game')) , 1000)
}))

Error : Error:(6, 35) TS2345: Argument of type 'Promise<typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")>' is not assignable to parameter of type '{ default: never; } | PromiseLike<{ default: never; }> | undefined'. Type 'Promise<typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")>' is not assignable to type 'PromiseLike<{ default: never; }>'. Types of property 'then' are incompatible. Type '<TResult1 = typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game"), TResult2 = never>(onfulfilled?: ((value: typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")) => TResult1 | PromiseLike<...>) | null | undefined, onrejected?: ((reaso...' is not assignable to type '<TResult1 = { default: never; }, TResult2 = never>(onfulfilled?: ((value: { default: never; }) => TResult1 | PromiseLike) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'. Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible. Types of parameters 'value' and 'value' are incompatible. Property 'default' is missing in type 'typeof import("D:/PROGECTS/SnakeReactReduxTS/snake-react-redux-ts/src/Components/Stages/Game")' but required in type '{ default: never; }'.

What does he want from me?

Upvotes: 1

Views: 5303

Answers (4)

Jakob Vase
Jakob Vase

Reputation: 159

React.lazy wants a default export. If your './Game' doesn't export default, this won't work.

You could try this (where I'm guessing you're exporting a component called Game in the './Game' file). Otherwise, use a default export.

const Game = React.lazy(() => new Promise( (resolve) => {
    setTimeout( () => resolve({default: import('./Game').Game}) , 1000)
}))

Upvotes: 0

solanki...
solanki...

Reputation: 5098

lazy function returns a promise of { default: ... } object which being called asynchronously and will await till promise being not resolved that beind delayed for 1000 ms and in the end will import the Game component and return it.

    const Game = React.lazy(async () => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return import('./Game');
    });

Hope this helps!!

Upvotes: 4

Richard Haddad
Richard Haddad

Reputation: 1004

What does he want from me?

What do you want from him ?

React.lazy should be used like that:

const Game = React.lazy(() => import('./Game'));

You may have a more specific use-case (tell us) but the basic usage is like that.

I invite you to read the doc https://reactjs.org/docs/code-splitting.html#reactlazy

Upvotes: 1

Jay Parmar
Jay Parmar

Reputation: 378

    const Game = React.lazy(() => import('./Game'))

You have try this

Upvotes: 0

Related Questions