Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic imports don't work from inlined web worker #17825

Open
7 tasks done
kot-lex opened this issue Aug 5, 2024 · 7 comments · May be fixed by #17859
Open
7 tasks done

Dynamic imports don't work from inlined web worker #17825

kot-lex opened this issue Aug 5, 2024 · 7 comments · May be fixed by #17859

Comments

@kot-lex
Copy link

kot-lex commented Aug 5, 2024

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.

image

Reproduction

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

Steps to reproduce

  1. Open https://stackblitz.com/edit/vitejs-vite-2td2he?file=src%2Fworker.ts
  2. Open dev tools
  3. Click "send message to worker" button
  4. 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

Copy link

stackblitz bot commented Aug 5, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@proc07
Copy link
Contributor

proc07 commented Aug 9, 2024

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

@proc07 proc07 linked a pull request Aug 10, 2024 that will close this issue
@hi-ogawa
Copy link
Collaborator

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
Copy link
Author

kot-lex commented Aug 11, 2024

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

@hi-ogawa
Copy link
Collaborator

@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
Copy link
Author

kot-lex commented Aug 12, 2024

@hi-ogawa sure:

  1. I serve static from a CDN with a different origin, so my only option is inline worker to avoid CORS issues.
  2. 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
Copy link
Member

For your usecase, I'd recommend using this workaround (#13680 (comment)).
IMO the inline worker should inline everything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants