How to obtain production environment react.lazy Our support

[ppbl]

Is your feature request related to a problem? Please describe.

react.lazy It's available during development, like this

const Component = lazy(() => import(`../pages${page}`));

But after build, the import failed

Describe the solution you'd like

After build, it can work normally

Describe alternatives you've considered

Additional context

I just tried to use vite in react to see if I could migrate from CRA 😌

[lovetingyuan]

I think in build mode, any module path must be determined constant string.
Runtime dynamic import only works in development mode.

[jonaskuske]

Try to add a file extension to your import statement, e.g.

import(`../pages/${page}.js`)

Vite is using rollup for its build, so I assume the same limitations apply when it comes to dynamic imports:
https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations

[ppbl]

Is it because of the difference between the mechanism of Web pack and that of CRA

Adding a file extension will still report an error at runtime（ use ts to write, the extension is ts or js？）

dynamic-import-vars I tried, but I still can't. I won't use it 😅

So the conclusion is that vite doesn't support it for the time being, right？

[jonaskuske]

use ts to write, the extension is ts or js？

In that case ts (or probably tsx?) – this is about the build tool finding the corresponding file in the directory

So the conclusion is that vite doesn't support it for the time being, right?

No, it is supported, what you encounter is a bug (either with your code or Vite). But unless you provide a repro I don't think it'll get worked on and fixed.

[ppbl]

@jonaskuske Thank you very much.👍

Try to add a file extension to your import statement, e.g.

import(`../pages/${page}.js`)

Vite is using rollup for its build, so I assume the same limitations apply when it comes to dynamic imports:
https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations

I've looked at the restrictions again, and now I understand

Two main points

1. There must be a static part
2. Must end with extension

import(`../pages/${page}/index.tsx`)

Since my page was a directory, I need to add it now index.tsx

And dynamic import vars has been introduced😂

Okay, I feel like I'm stupid. I'll close this issue later🤦‍♂️

[jonaskuske]

Awesome, glad I could help! 🤞