Curious behaviour when loading CJS/ESM with `vite.ssrLoadModule`

Describe the bug

After upgrading to Vite 4 I am no longer able to consume certain packages, but the same packages worked in Vite 3:

• uuid (same issue reported in #11378)
• @vanilla-extract/css/adapter (uses Preconstruct to generate the package.json)

See linked repo for instructions and reproduction.

---

But investigating a bit further why it fails with @vanilla-extract/css/adapter I’ve identified a curious behaviour.

I’ve recorded a CodeTour in the linked repo which explains the behaviour (requires VS Code).

TL;DR:

• Vite 4 resolves @vanilla-extract/css/adapter main entry point (defined in package.json#exports) using the module condition (./dist/vanilla-extract-css-adapter.esm.mjs), then reverts to package.json#main (./dist/vanilla-extract-css-adapter.cjs.js).
• In Vite 3 @vanilla-extract/css/adapter is resolved to ./dist/vanilla-extract-css-adapter.cjs.js using the default condition.

Reproduction

https://github.com/mrm007/vite-mjs-repro

Steps to reproduce

1. Clone the repo
2. Install dependencies: pnpm install
3. Start the server with Vite 4: pnpm vite4

Instructions are also in the linked repo’s README.

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 323.44 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.volta/tools/image/node/16.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.11.0 - ~/.volta/tools/image/node/16.16.0/bin/npm
    Watchman: 2022.12.05.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 108.0.5359.124
    Edge: 108.0.1462.46
    Firefox: 108.0
    Firefox Developer Edition: 107.0
    Safari: 16.2
  npmPackages:
    vite: ^4.0.1 => 4.0.1

Used Package Manager

pnpm

Logs

With uuid:

(node:79886) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
TypeError: Cannot read properties of undefined (reading 'v4')
    at /___/vite-mjs-repro/routes/uuid.ts:3:11
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async instantiateModule (file:///___/vite-mjs-repro/node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:53234:9)

With @vanilla-extract/css:

(node:79886) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
TypeError: Cannot read properties of undefined (reading 'setAdapter')
    at /___/vite-mjs-repro/routes/vanilla.ts:3:0
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async instantiateModule (file:///___/vite-mjs-repro/node_modules/.pnpm/vite@4.0.1/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:53234:9)

Logs are also in the linked repo’s README.

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.

[mrm007]

Thanks @patak-dev and @bluwy for the very speedy fix 🤝

[nhe23]

@patak-dev That was fast 😄. Thank you for your work 👍