javascript - 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 inpatible. 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 inpatible. Types of parameters 'value' and 'value' are inpatible. 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?

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

What does he want from me?

Share Improve this question asked Jun 26, 2020 at 12:33 Rudenya 271 silver badge5 bronze badges

Hi, please give us more information about what are you going to do? What efforts did you make and what is the problem are you facing? And, please, please, make the error log easy to read – RY_ Zheng Commented Jun 26, 2020 at 13:21
I want to make simulate delay. The code works fine on JS, I just want to typify it – Rudenya Commented Jun 26, 2020 at 15:21

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

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 ponent and return it.

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

Hope this helps!!

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/docs/code-splitting.html#reactlazy

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

You have try this

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 ponent 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)
}))

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - TypeScript + React.Lazy - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)