vite dev doesn't copy assets to node_modules/.vite/deps via new URL() support in worker scripts

[schickling]

Describe the bug

vite dev doesn't copy assets to node_modules/.vite/deps via new URL() support in worker scripts

Manually copying the missing assets to node_modules/.vite/deps seems to fix the problem as a workaround.

Reproduction

https://github.com/schickling-test/2022-nov-vite-worker-dev-repro

Steps to reproduce

Unfortunately due to some Stackblitz WASM limitations, it doesn't work on Stackblitz yet.

Setup

git clone git@github.com:schickling-test/2022-nov-vite-worker-dev-repro.git
2022-nov-vite-worker-dev-repro
npm install

Repro bug: dev not working

npm run dev
# dev console should now show WASM errors and the network monitor should show 404s

Repro workaround: dev working

npm run dev
npm run fix-dev # run in another terminal
# things should work now

Repro prod build working

npm run build
npm run preview # uses netlify cli to use the needed HTTP headers
# things should work now

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 47.81 MB / 32.00 GB
    Shell: 3.4.1 - /Users/schickling/.nix-profile/bin/fish
  Binaries:
    Node: 16.16.0 - ~/.nix-profile/bin/node
    Yarn: 1.22.18 - ~/.nix-profile/bin/yarn
    npm: 8.11.0 - ~/.nix-profile/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Chrome Canary: 109.0.5396.0
    Firefox: 100.0
    Safari: 16.1
  npmPackages:
    vite: ^3.2.2 => 3.2.2

Used Package Manager

npm

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.

[schickling]

Possibly related to #8427 but the mentioned optimizeDeps.exclude workaround didn't work for me.

[sapphi-red]

@schickling optimizeDeps.exclude did work for me. Would you try it again just in case?

import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 8083,
  },
  build: {
    sourcemap: true,
    target: ['es2020'],
  },
  optimizeDeps: {
    esbuildOptions: { target: 'es2020' },
    exclude: ['sqlite-wasm-esm']
  },
  plugins: [
    // Needed to enable OPFS
    {
      name: 'configure-response-headers',
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
          res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
          next()
        })
      },
    },
  ],
})

[schickling]

Thanks a lot for your comment, I'll give the exclude option another try.

Given I have control over the sqlite-wasm-esm package, are there some patterns that can cause this? So put differently, what could I change in the sqlite-wasm-esm package so this problem might be resolved?

[sapphi-red]

I guess replacing const wasmUrl = new URL('sqlite3.wasm', import.meta.url).href with import wasmUrl from 'sqlite3.wasm?url' would work for Vite.
But that will break other bundlers and nodejs.

[schickling]

Thanks a lot for your comment, I'll give the exclude option another try.

Using exclude: ['sqlite-wasm-esm'] seems to indeed work now as a workaround. Closing as duplicate of #8427.

Thanks for your help @sapphi-red