resolve conditions not respected when running the dev server / ssrLoadModule

[marbemac]

Describe the bug

I am setting resolve.conditions to ["workerd", "worker", "browser"], and ssr.target to webworker, so that imported packages use the browser/worker/edge versions if available.

This works fine during vite build, but it seems these config options are not respected when running the vite dev server or manually creating a server and using ssrLoadModule.

Reproduction

https://github.com/marbemac/vite-ssr-resolve-bug

Steps to reproduce

yarn followed by yarn start. Note the console logs out undefined for the renderToReadableStream import. This indicates the import resolved to the node version of react, despite the ssr target and resolve conditions.

System Info

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 60.00 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.13.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
    pnpm: 8.8.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 117.0.5938.132
    Safari: 16.6
  npmPackages:
    vite: 4.4.9 => 4.4.9

Used Package Manager

yarn

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.

[sapphi-red]

The reason why resolve.conditions is not respected is because react is externalized.
I think it works only if you run the server with node --conditions=worker ./dist/app-hash.js. Or if you no-externalize react. (Note that your vite.config.ts doesn't have build.ssr: true and it won't generate a SSR bundle unless you run vite build with --ssr flag.)

For more details, see #13487 (comment) (It would be great if you implement ssr.resolve.externalConditions/ssr.resolve.conditions.)

[marbemac]

For more details, see #13487 (comment)

Hmm OK I've read through this discussion. A couple of questions:

Note that your vite.config.ts doesn't have build.ssr: true and it won't generate a SSR bundle unless you run vite build with --ssr flag.

In this case it's not the build step - it's the Vite dev server (specifically ssrLoadModule). I was trying to simulate the use-case in a smaller contrived example in https://github.com/marbemac/vite-ssr-resolve-bug, but I can update it to actually use vite dev to show the problem if that would make things clearer?

It would be great if you implement ssr.resolve.externalConditions/ssr.resolve.conditions.

I could take a crack at this! What I did in #14498 was to set target to web and to respect resolve conditions IF ssr.target is webworker.

1. Would you prefer the two new ssr.resolve options over the approach in 14498?
2. What about targetWeb (https://github.com/vitejs/vite/pull/14498/files#diff-b350d5b1ae72be9b18838ab1253d5bd6408d977e04183a94e190b6f496fb4c7eR279)? What do you think about setting it to true if the ssr target is webworker?

Thanks for the reply!

[marbemac]

Re item 2 in prior comment - this is similar to how the resolve plugin targets web if !ssr OR if ssr.target === 'webworker' ->

vite/packages/vite/src/node/plugins/resolve.ts

Line 168 in d080b51

const targetWeb = !ssr || ssrTarget === 'webworker'

Would be aligning this behavior during ssrLoadModule , so it's consistent.

[marbemac]

@sapphi-red ok I took a crack at the new ssr.resolve flags in #14498.