[SSR] Vite fails to process CJS npm packages

[brillout]

Describe the bug

In the context of SSR, Vite fails to process CJS npm packages.

The linked reproduction is minimal and shows the issue by adding react to ssr.noExternal.

Another reproduction showcasing that this issue is a blocker for users: brillout/vite-ssr-preact-mui. In general, it often happens that a CJS package needs to be processed by Vite; this issue is a major blocker.

Reproduction

https://github.com/brillout/vite-ssr-noExternal-cjs

Steps to reproduce

See the reproduction's README.md.

System Info

System:
    OS: Linux 4.14 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 Intel(R) Celeron(R) N4020 CPU @ 1.10GHz
    Memory: 333.86 MB / 3.72 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 3.6.0 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    Watchman: 4.9.0 - /home/rom/.nix-profile/bin/watchman
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.4 
    vite: ^4.3.9 => 4.4.9

Used Package Manager

pnpm

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.

[bluwy]

I'm pretty sure this was intentional from the start. noExternal needs to be for ESM only, hence we had not added CJS shims in the past when Vite processes them.

However, I had also thought if we can at least make CJS transform handling a noop (in dev) but I'm not sure how that looks like. It would kinda work the same as not putting them in noExternal in the first place, but it does signal to bundle it in build.

[cyco130]

The problem is that Vite can't process CJS at all. It has to prebundle them which is the default behavior for the browser. It fails in the browser too if you exclude a CJS dep from optimizeDeps.

For the server, it's off by default. Your example does work with ssr.optimizeDeps: ["react"] instead of ssr.noExternal. I use vite-plugin-cjs-interop when it doesn't.

I think a heuristic like "automatically add CJS SSR dependencies to ssr.optimizeDeps" would solve a lot of problems for new comers.

[brillout]

After adding react to ssr.optimizeDeps.include I still get the same error. It seems like ssr.optimizeDeps doesn't have any effect.

According to #8917, ssr.optimizeDeps.include should solve the issue by transpiling CJS to ESM (using the same esbuild pre-bundling mechanism used for the client-side). So it seems like there is some kind of bug going on?

Quoting @patak-dev from here:

I'll work on the heuristics change in a future PR.

Is that still on the radar? Such heuristic would be extremely helpful.

The CJS/ESM issues are by far the biggest pain vite-plugin-ssr users are having. Fixing ssr.optimizeDeps + heuristics would massively help.

A glimpse of how painful it is for the user:

Every time the user adds an npm package to ssr.noExternal it means the user encountered an issue with that npm package and had to workaround it by adding the npm package to ssr.noExternal. Heuristics seem paramount here.

[sheremet-va]

Does Vite actually need to process them or just run these files? Vite-Node just implements require/exports and provides it to the runtime alongside import which allows delegating CJS logic to Node.js (from the error message I see that noExternal packages don't know about require).

Maybe this can partially help with the issue.