[Vite 3] CJS Bug

[brillout]

Describe the bug

In some scenarios Vite seems to not be able to handle CJS dependencies.

This only happens with Vite 3.

Reproduction

https://github.com/brillout/vite-3-cjs-bug

Additional Context

vikepress includes .ts, .css, and .svg files: that's because Node.js cannot handle import './someStyles.css' nor import emojiUrl from './someEmoji.svg', which means that vikepress cannot be externalized. That's why vikepress publishes its source files to npm.

Note that including source files is also a common practice in SvelteKit's ecosystem.

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (2) x64 Intel(R) Celeron(R) N4020 CPU @ 1.10GHz
    Memory: 509.13 MB / 2.71 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 18.0.0 - ~/.config/nvm/versions/node/v18.0.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - ~/.config/nvm/versions/node/v18.0.0/bin/npm
  Browsers:
    Firefox: 97.0.1
  npmPackages:
    vite: ^2.8.4 => 3.0.0-beta.5

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.

[brillout]

This bug also happens with 3.0.0-beta.7. The reproduction is updated and now uses 3.0.0-beta.7.

[patak-dev]

Is vikepress a CJS dependency? If that is the case, in SSR it needs to be optimized and then you can't use vite features in it.
If vikepress would be a ESM dep, then you can mark it as noExternal in the same way and it won't be optimized by default, so you can use vite features.

I think that the only way to have a CJS dependency that needs vite features is to set legacy.buildPluginCommonjs so esbuild optimization is disabled. Or you could keep optimization in general, and add @rollup/plugin-commonjs passing an include targeting only vikepress, so the rest of the deps are still bundled more closely to dev.

[brillout]

VikePress is ESM. It is vite-plugin-ssr which is CJS; I think the problem here is that Vite doesn't externalize vite-plugin-ssr but it should.

[patak-dev]

So vite-plugin-ssr is CJS, but it is a pure lib without using Vite features, no?
If vikepress is noExternal and ESM, then it shouldn't be optimized... and it should discover vite-plugin-ssr and externalize it by default. And you even set it manually in vite-plugin-ssr as external.
I'll check what is going on.

[brillout]

Yes that's my analysis as well.

[stefanvanherwijnen]

I am having a similar issue where packages, even when defined in noExternal end up in node_modules/.vite/deps_ssr. For me it seems to have started with beta.7.

[patak-dev]

Packages that are marked as noExternal will end up in node_modules/.vite/deps_ssr if the package is CJS. If it is ESM, by default they shouldn't be there or there is a bug.
But when they are CJS, we need to pre-bundle them if we want to avoid using plugin-commonjs

[stefanvanherwijnen]

Makes sense. The package is not a type: module but does have a module entry. However, I am aliasing it to src directly which has ES syntax, but vite seems to ignore that for ssr and uses the ptebundle instead.

[patak-dev]

You can try to place it in ssr.optimizeDeps.exclude. If it is aliased though, right now it shouldn't optimize it. Interested in a minimal reproduction if you could create one @stefanvanherwijnen

[stefanvanherwijnen]

Thanks, I didn't know about ssr.optimizeDeps. I'll see if I can reproduce the issue in a MWE.

[patak-dev]

@stefanvanherwijnen we're thinking about waiting until Vite 4 to enable ssr and build deps optimization so we can release v3 sooner. If you want to test, this PR may be what ends up reaching stable:

• refactor: opt-in optimizeDeps during build and SSR #8965

[brillout]

Fixed in beta.9 🎉.