when dependency modules use React.lazy, vite convert more 'default' wrapped the component

[SheldonWatson]

Describe the bug

When I use this code:

throw this error:

I guess vite may convert more 'default' wrapped the component, which cause the error.

Reproduction

https://github.com/SheldonWatson/vite-commonjs-isure

System Info

System:
    OS: macOS 11.2.3
    CPU: (8) arm64 Apple M1
    Memory: 139.81 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.1.0 - ~/n/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.17.0 - ~/n/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.0.3
  npmPackages:
    vite: ^2.4.4 => 2.4.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ygj6]

Because @material-ui/icons/Search is a comonJS module, vite will convert it to esm during dependency pre-bundling, so .default is required for dynamic import, for example:

React.lazy(async () => (await import('@material-ui/icons/Search')).default)

[SheldonWatson]

Because @material-ui/icons/Search is a comonJS module, vite will convert it to esm during dependency pre-bundling, so .default is required for dynamic import, for example:

React.lazy(async () => (await import('@material-ui/icons/Search')).default)

I'm still confused, when I use import Search from '@material-ui/icons/Search', it's right,
why dynamic import will cause error?

[SheldonWatson]

In other words，when I use a third part dependency, what's the applicable way to use React.lazy, ?
does your way is still work for esm dependency?

React.lazy(async () => (await import('@material-ui/icons/Search')).default)

[ygj6]

In other words，when I use a third part dependency, what's the applicable way to use React.lazy, ?
does your way is still work for esm dependency?

React.lazy(async () => (await import('@material-ui/icons/Search')).default)

Both ways are possible, only the time to load the module is different.

The import Search from '@material-ui/icons/Search method attaches default members to Search，document link.

And the dynamic import import('@material-ui/icons/Search') is returning a promise, so it is asynchronous, document link.

(await import('@material-ui/icons/Search')) returns the entire module object, so .default is needed to use the default members of the module.

[SheldonWatson]

In other words，when I use a third part dependency, what's the applicable way to use React.lazy, ?
does your way is still work for esm dependency?

React.lazy(async () => (await import('@material-ui/icons/Search')).default)

Both ways are possible, only the time to load the module is different.

The import Search from '@material-ui/icons/Search method attaches default members to Search，document link.

And the dynamic import import('@material-ui/icons/Search') is returning a promise, so it is asynchronous, document link.

(await import('@material-ui/icons/Search')) returns the entire module object, so .default is needed to use the default members of the module.

Thx for your detailed document link，but I still want to know if (await import('@material-ui/icons/Search')) returns the entire module object，why when I use const Search = React.lazy(() => import('@material-ui/icons/Search')) in webpack bundled project, it works well？It is webpack do the things that attaches default members to Search?

[ygj6]

Because it is a commonJS module, vite will convert it to esm during dependency pre-bundling.
here is the converted code：

[SheldonWatson]

Because it is a commonJS module, vite will convert it to esm during dependency pre-bundling.
here is the converted code：

However, if I dynamic import local files：

const Child =  React.lazy(() => import('./child'))

it can work well,
here is my demo: https://github.com/SheldonWatson/vite-commonjs-isure

[ygj6]

After import('@material-ui/icons/Search') conversion there is a defalut under the default,
here's my printout of the differences between them, which should help you understand：

[SheldonWatson]

Thx for your so detailed explain！
However, in case of some unexpected error in production environment，I still use webpack to bundle project,
I just use vite in development environment，so your code React.lazy(async () => (await import('@material-ui/icons/Search')).default) works well in Dev environment, but throw this error in Prod environment：

I'm really confused about vite's pre-bundling that convert cjs to esm, why cause another default? Or is it webpack does some compatible thing to it?

[hyf0]

@ygj6 It looks like an edge case for lazyImport, which is handled properly in static import. I'm working on it.

[ygj6]

Good, I mistakenly thought the problem was caused by esbuild conversion code and I stopped analyzing the problem, fortunately you found the correct cause.

[SheldonWatson]

So,when will fix the bug？In next version？

…

---Original--- From: ***@***.***> Date: Sat, Aug 14, 2021 16:46 PM To: ***@***.***>; Cc: ***@***.***>;"State ***@***.***>; Subject: Re: [vitejs/vite] when dependency modules use React.lazy, vite convert more 'default' wrapped the component (#4553) Good, I mistakenly thought the problem was caused by esbuild conversion code and I stopped analyzing the problem, fortunately you found the correct cause. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[hyf0]

@SheldonWatson It should be the nearest version after #4596 merged. After reading commit history, I think it should be v2.5.0.

[SheldonWatson]

Thx，By the way，did you notice in  cjs package，requie static resource such as image will throw error,but require js is ok！

…

---Original--- From: "Yunfei ***@***.***>  Date: Sat, Aug 14, 2021 18:11 PM To: ***@***.***>; Cc: ***@***.******@***.***>; Subject: Re: [vitejs/vite] when dependency modules use React.lazy, vite convert more 'default' wrapped the component (#4553) @SheldonWatson It should be the nearest version after #4596 merged. After reading commit history, I think it should be v2.5.0. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[hyf0]

@SheldonWatson I haven't met such cases. It will be good to open another issue to track the problem and provide a reproduction example.

[SheldonWatson]

@SheldonWatson I haven't met such cases. It will be good to open another issue to track the problem and provide a reproduction example.
@iheyunfei
@ygj6 He know the problem, and I solved it by his plugin @originjs/vite-plugin-commonjs

[SheldonWatson]

v2.5.0.

Have you fixed it? I update vite to 2.5.0，but it still doesn't work!

[hyf0]

@SheldonWatson It's still pending and not merged #4596.