Worker .data and .wasm files aren't found in production / built version

[Ben Lu]

Describe the bug

My project essentially does:

import vimWorkletUrl from "vim-wasm/vim.js?url";
...

This works great in development mode, but in production I get 404, these assets aren't found

Dev:

Prod:

I can't find any trace of them in the dist directory

Reproduction

https://github.com/ayroblu/wasm-import-bug

Steps to reproduce

yarn
yarn dev
# Verify it works
yarn build && yarn preview
# verify it doesn't work

System Info

System:
    OS: macOS 13.1
    CPU: (8) x64 Apple M1 Pro
    Memory: 24.88 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.2.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.87
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0
    vite: ^4.0.0 => 4.0.4

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.

[翠 / green]

This is not a bug in Vite. Because vim.wasm (emscripten output) uses a dynamic url to fetch the .wasm/.data file, Vite cannot detect that and cannot bundle those files. It works in dev just because the files happens to be served where vim.wasm expects.

One workaround is to use Module.locateFile. But vim.wasm doesn't expose that function and we cannot use this function.

Another workaround is to use vite-plugin-static-copy and copy the .wasm/.data files to where vim.wasm expects.