Dynamic imports don't work from inlined web worker

kot-lex commented 3 months ago

Describe the bug

I'm using an inlined (?worker&inline) web worker that dynamically imports some other libraries. It works well in dev mode but fails in the production build since the filenames are relative which doesn't work with the worker's blob url.

Reproduction

https://stackblitz.com/edit/vitejs-vite-2td2he?file=src%2Fworker.ts

Steps to reproduce

Open https://stackblitz.com/edit/vitejs-vite-2td2he?file=src%2Fworker.ts
Open dev tools
Click "send message to worker" button
Check the error message in the console

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.3.5 => 5.3.5

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 3 months ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-2td2he (Open reproduction)

proc07 commented 3 months ago

After using inline, the code will be converted to base64 encoding, which leads to the relative path after compilation, which is a wrong way to get it, and I will fix this problem

hi-ogawa commented 3 months ago

If the intent is to inline an entire worker without code-splitting, then it's possible to use rollupOptions.output.inlineDynamicImports: true (though probably allowing code-splitting is still useful for inline worker). This is an updated repro https://stackblitz.com/edit/vitejs-vite-b7pvdf?file=vite.config.ts

kot-lex commented 3 months ago

@hi-ogawa my goal is to use dynamic imports inside the inline worker without inlining.

hi-ogawa commented 3 months ago

@hi-ogawa my goal is to use dynamic imports inside the inline worker without inlining.

@kot-lex Yeah, it's apparent that this pattern is not working and thanks for the reproduction. Btw, can you elaborate more on how it's not ideal to have neither non-inline worker nor fully-bundled inline worker with inlineDynamicImports: true for your actual use cases?

kot-lex commented 3 months ago

@hi-ogawa sure:

I serve static from a CDN with a different origin, so my only option is inline worker to avoid CORS issues.
Inside the worker I'm dynamically importing some heavy wasm libraries based on the provided configuration. It would be a huge overhead if I inline all possible variations of those imports.

sapphi-red commented 3 months ago

For your usecase, I'd recommend using this workaround (https://github.com/vitejs/vite/issues/13680#issuecomment-1819274694). IMO the inline worker should inline everything.

vitejs / vite