CommonJS module is unable to be imported from TypeScript file in NPM package in dev mode

[dstaley]

Describe the bug

When an npm packge published to the registry as TypeScript tries to import the classNames package (which is CommonJS), the following error occurs during vite:

Uncaught SyntaxError: The requested module '/node_modules/classnames/index.js?v=1c99386f' does not provide an export named 'default' (at index.tsx:1:8)

This error does not occur when the app is built using vite build.

Reproduction

https://github.com/dstaley/vite-classnames-import-bug

Steps to reproduce

1. npm run dev
2. Open browser, confirm no UI is rendered, confirm console has error.
3. npm run build
4. Open built app (npx serve works for this).
5. Confirm "sample-component if-you-see-this-it-works" is rendered.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Memory: 39.12 GB / 63.73 GB
  Binaries:
    Node: 18.19.0 - ~\AppData\Local\Volta\tools\image\node\18.19.0\node.EXE
    npm: 10.5.0 - ~\AppData\Local\Volta\tools\image\npm\10.5.0\bin\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97), ChromiumDev (125.0.2506.0)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1
    vite: ^5.2.0 => 5.2.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.

[hi-ogawa]

Not sure if this is bug but you can probably try optimizeDeps: { include: ["sample-package > classnames"] } https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude.

[dstaley]

@hi-ogawa Thank you so much! You're right that the docs seem to indicate this isn't a bug, and is likely expected behavior. The only thing that confuses me is that sample-package isn't technically an ESM package, but I guess this is what happens when you do something silly like shipping TypeScript directly to npm.

Gonna leave this open, but would not be offended if this was closed as expected behavior.

[bluwy]

I think this is a variation of #3910. Since sample-package publishes raw JSX, Vite's prebundling doesn't bundle the .jsx file (in favor of transpiling it later when used, so classnames was indirectly not prebundled too.

Unfortunately the problem is a bit hard to fix in Vite at the moment, and the explicit optimizeDeps.include config is the easiest way to workaround this at the moment. I'll close this for now in favour of the linked issue above so we track it in a single place.