namespace import would be transformed to void 0

[maelon]

Describe the bug

My project need antd v3，but console report this error when my vite devserve runs in development. The antd source code path is node_modules/antd/es/local-provider/index.js. The transformed code is 'void 0'

Reproduction

https://stackblitz.com/edit/vitejs-vite-jdrder

Steps to reproduce

No response

System Info

System:
    OS: macOS 11.6.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 87.24 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    pnpm: 8.10.5 - ~/.nvm/versions/node/v18.19.0/bin/pnpm
    Watchman: 2023.09.04.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 120.0.6099.199
    Edge: 120.0.2210.121
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-legacy: ^5.2.0 => 5.2.0 
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.0.11 => 5.0.11

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 vuejs/core 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-jdrder (Open reproduction)

[bluwy]

The repro isn't working correctly for me, but this seems similar to #15542

[maelon]

The repro isn't working correctly for me, but this seems similar to #15542

This case is default in namespace import，moment be transformed to { default: ... }，so moment.locale be transformed to void 0

[maelon]

I find the answer， config add this option mainFields: ['browser', 'module']，because moment uses jsnext

[XiSenao]

It seems to be related to the interop of esbuild. In the pre-build phase, vite confirms the ESM module of moment through the jsnext:main field. esbuild loads esm modules using namespace import and obtains values are all { default: module }. If mainFields: ['main'] is specified, it will change vite's behavior and obtain moment's CJS module. esbuild loads moment (CJS) modules in ant (ESM) module through namespace import, which will additionally extend object(including Array) properties, so moment.locale can be used normally.

Explanation:
Specifying mainFields: ['browser', 'module'] may not have an effect on the moment module. Finally, it will fallback to the main field.

[NhanHoang8195]

I find the answer， config add this option mainFields: ['browser', 'module']，because moment uses jsnext

I have similar problem with moment library.

I import the moment library like this

import moment, {parseZone} from 'moment',

I got an error in start dev server and build production.

It raised an error: RollupError: "parseZone" is not exported by "node_modules/moment/dist/moment.js"

I tried your solution and it works now.

FYI @XiSenao

[XiSenao]

Thank you for your feedback!

This is because the esm module of moment only provides default exports, so using named imports in vite will cause exceptions. As for the feasible reason you mentioned, it actually guides vite to load moment's CJS module, and there will be interop between vite and pre-built artifacts. I think this seems to be a problem with the package itself rather than an issue with vite.

[NhanHoang8195]

Thanks for your explanation.

But with the same code, I ran with webpack (from CRA) and it worked normally, so I think that there may be a problem from vite transformation.

[XiSenao]

Because webpack loads the CJS module of moment, it is similar to setting resolve.mainFields = ['main'] in vite configuration. The product corresponding to the main field of moment is fine. What I want to point out is that the ESM product corresponding to the jsnext:main field of moment does not seem to be compliant.

[XiSenao]

I will temporarily close this issue. The esm module corresponding to the jsnext:main field of moment only provides default exports, so when imported using namespace import, the object structure is { default: module }. If you feel that this issue still needs to be reopened and valuable information provided, I will reopen it.