Can't import named exports from momentjs

[igor-pavlichenko]

Describe the bug

Whenever i try to import a named export from moment

import { isMoment } from "moment";

// ...

console.log(isMoment('test'));

the app silently crashes and the only error i can see is in the browser's console:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/moment.js?v=0e6d36e8' does not provide an export named 'isMoment' (at App.tsx:4:10)

But when using the default import

import Moment from "moment";

// ...

console.log(Moment.isMoment('test'));

everything works fine

Reproduction

https://codesandbox.io/p/sandbox/spring-framework-rwrpjj

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.57 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    pnpm: 6.11.0 - ~/.nvm/versions/node/v16.14.0/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.6
  npmPackages:
    @vitejs/plugin-react: ^4.0.3 => 4.0.4 
    vite: ^4.4.5 => 4.4.7

Used Package Manager

npm

Logs

Click to expand!

```shell

vite:config bundled config file loaded in 102.25ms +0ms
vite:config using resolved config: {
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:watch-package-data',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:react-swc',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config optimizeDeps: {
vite:config disabled: 'build',
vite:config force: undefined,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config sourcemap: false,
vite:config rollupOptions: { onwarn: [Function: onwarn] },
vite:config minify: 'esbuild',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
vite:config modulePreload: { polyfill: true },
vite:config cssMinify: true
vite:config },
vite:config esbuild: {
vite:config jsxDev: false,
vite:config jsx: 'automatic',
vite:config jsxImportSource: 'react',
vite:config tsconfigRaw: { compilerOptions: [Object] }
vite:config },
vite:config configFile: '/workspace/vite.config.ts',
vite:config configFileDependencies: [ '/workspace/vite.config.ts' ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: { force: undefined },
vite:config build: {}
vite:config },
vite:config root: '/workspace',
vite:config base: '/',
vite:config rawBase: '/',
vite:config resolve: {
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config browserField: true,
vite:config conditions: [],
vite:config extensions: [
vite:config '.mjs', '.js',
vite:config '.mts', '.ts',
vite:config '.jsx', '.tsx',
vite:config '.json'
vite:config ],
vite:config dedupe: [],
vite:config preserveSymlinks: false,
vite:config alias: [ [Object], [Object] ]
vite:config },
vite:config publicDir: '/workspace/public',
vite:config cacheDir: '/workspace/node_modules/.vite',
vite:config command: 'build',
vite:config mode: 'production',
vite:config ssr: {
vite:config format: 'esm',
vite:config target: 'node',
vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] }
vite:config },
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config isProduction: true,
vite:config css: undefined,
vite:config server: {
vite:config preTransformRequests: true,
vite:config sourcemapIgnoreList: [Function: isInNodeModules],
vite:config middlewareMode: false,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config envDir: '/workspace',
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(1) {
vite:config 'fnpd_/workspace' => {
vite:config dir: '/workspace',
vite:config data: [Object],
vite:config hasSideEffects: [Function: hasSideEffects],
vite:config webResolvedImports: {},
vite:config nodeResolvedImports: {},
vite:config setResolvedCache: [Function: setResolvedCache],
vite:config getResolvedCache: [Function: getResolvedCache]
vite:config },
vite:config set: [Function (anonymous)]
vite:config },
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:watch-package-data',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:worker-post',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:load-fallback'
vite:config ],
vite:config rollupOptions: {},
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config } +11ms
vite v4.4.2 building for production...
vite:esbuild 29.09ms tsconfck init /workspace +0ms
✓ 34 modules transformed.
✓ built in 853ms
"isMoment" is not exported by "node_modules/moment/dist/moment.js", imported by "src/App.tsx".
file: /workspace/src/App.tsx:4:17
2: import reactLogo from "./assets/react.svg";
3: import "./App.css";
4: import Moment, { isMoment } from "moment";
^
5:
6: function App() {
error during build:
RollupError: "isMoment" is not exported by "node_modules/moment/dist/moment.js", imported by "src/App.tsx".
at error (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
at Module.error (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:13584:16)
at Module.traceVariable (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:14009:29)
at ModuleScope.findVariable (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:12527:39)
at FunctionScope.findVariable (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:7085:38)
at ChildScope.findVariable (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:7085:38)
at Identifier.bind (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:8247:40)
at CallExpression.bind (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:5853:23)
at CallExpression.bind (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:9813:15)
at CallExpression.bind (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:5849:28)

</details>

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite-plugin-react/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite-plugin-react/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite-plugin-react/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite-plugin-react/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[ArnaudBarre]

So the issue is that default moment build of moment is some wrapper format that don't expose named export.
There is some esm build, but under a non conventional name.
Link: https://github.com/moment/moment/blob/develop/package.json#L25-L26

This was working last year but we didn't test named export when removing moment special edge case: vitejs/vite#11502
Because the project is stale, I don't think Vite should re-add some specific code to that.

What is nice is that you can use this experimental option in your config https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-needsinterop:

export default defineConfig({
    optimizeDeps: { needsInterop: ["moment"] },
});

Always using the default import is safer otherwise, and it you have time or the project is small, you should try to migrate to more modern date libs.

Another solution is to patch the package.json like that:

    "main": "./dist/moment.js",