Deps optimization in development mode breaks webassembly from the local filesystem packaged with pnpm

[jthemphill]

Describe the bug

Deps optimization with vite dev seems to break anything that relies on .wasm files produced locally and bundled via pnpm.

Building and running my project with vite dev will give you a relatively blank page, with this error in the JS console:

Uncaught CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0

This is because the request for the .wasm file didn't go through. Vite served us index.html instead. The byte sequence 3c 21 64 6f is <!do, the first four bytes of my index.html file.

Navigating to the network tab, you can see that we're requesting the .wasm file from http://localhost:5173/node_modules/.vite/deps/htmf_wasm_bg.wasm, but the dependency optimizer didn't actually move the .wasm file there.

To see what this project is like when it works:

1. https://jthemphill.github.io/htmf/ contains a working production version
2. pnpm run preview builds the project correctly, without dependency optimization
3. The main branch, which still uses npm, will work if you run npm run dev.

Reproduction

https://github.com/jthemphill/htmf/tree/pnpm

Steps to reproduce

To build the pnpm branch of my repo:

jhemphill@macbook-pro htmf/wasm/www % rustup install nightly
jhemphill@macbook-pro htmf/wasm/www % pnpm install
jhemphill@macbook-pro htmf/wasm/www % pnpm run build:wasm-st && pnpm run dev

> htmf@0.5.0 build:wasm-st /Users/jhemphill/oss/htmf/wasm/www
> wasm-pack build --target web --profiling

[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
warning: unstable feature specified for `-Ctarget-feature`: `atomics`
  |
  = note: this feature is not stably supported; its behavior can change in the future

warning: unstable feature specified for `-Ctarget-feature`: `bulk-memory`
  |
  = note: this feature is not stably supported; its behavior can change in the future

warning: unstable feature specified for `-Ctarget-feature`: `mutable-globals`
  |
  = note: this feature is not stably supported; its behavior can change in the future

warning: `htmf` (lib) generated 3 warnings
warning: `htmf-bots` (lib) generated 3 warnings (3 duplicates)
warning: `htmf-wasm` (lib) generated 3 warnings (3 duplicates)
    Finished release [optimized] target(s) in 0.05s
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: ✨   Done in 0.52s
[INFO]: 📦   Your wasm pkg is ready to publish at /Users/jhemphill/oss/htmf/wasm/pkg.

> htmf@0.5.0 dev /Users/jhemphill/oss/htmf/wasm/www
> vite


  VITE v5.0.12  ready in 123 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

And then navigate to http://localhost:5173/

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.98 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 121.0.6167.184
    Safari: 17.3.1
  npmPackages:
    @vitejs/plugin-react-swc: ^3 => 3.6.0 
    vite: ^5 => 5.0.12

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.

[sapphi-red]

Duplicate of #8427