Open rynpsc opened 2 years ago
It seems that Vite treats .ts?url
as a media asset.
Workaround: use .js
instead of .ts
.
That makes sense in some way. Because the .ts
extension as TypeScript source file doesn't have a proper corresponding MIME type. So .ts?url
is ambiguous. The best guess is video/mp2t
.
Vite should warn against that usage in development. So I mark the issue as a minor bug.
Hey, also got that error (wrong MIME video/mp2t
type with .ts
worker files) when building in production mode using:
new Worker(new URL('./generatePdf.worker.ts', import.meta.url), { type: 'module' })
it seems to work just fine with:
import PdfWorker from './generatePdf.worker?worker';
even tho it's not the recommended/standard approach
I'm not sure if it's about the mime type, since the issue in the repro is that the URL is being inline as a data uri, which causes the error. If we specify build.assetsInlineLimit: 0
to prevent that from happening, we get the raw TS file in the final bundle which wouldn't work if if the correct mime type is served because browsers don't understand TypeScript.
The issue seems to be that Vite treats them as pure assets like png, but instead if should be like workers with it's own custom handling.
@astahmer I'm surprised that the new Worker
syntax doesn't work. Perhaps it's different bug with web worker handling but it should be working the same way as ?worker
. Would appreciate if you can open another issue with a repro for it.
I was stuck on this for audio workers for a while, incase it's of any help to anyone also ending up here I got it working with
import MyWorkletProcessorUrl from "./MyWorkletProcessor?worker&url";
...
await context.audioWorklet.addModule(MyWorkletProcessorUrl);
https://github.com/vitejs/vite/blob/main/docs/guide/features.md#import-with-query-suffixes
I ran into this problem and used @penx's workaround. For me, it works when I build the bundle but gives me a bogus URL for the dev server.
My workaround for his workaround is to import twice, once for dev and once for prod, and use the appropriate URL:
import clientProd from "../client?worker&url";
import clientDev from "../client?url";
<script
type="module"
src={import.meta.env.PROD ? clientProd : clientDev}
/>
Describe the bug
When using
paintWorklet
a browser console error is thrown in production after runningvite build
. The error is:This error does not occur when using the dev server via
vite dev
.This can be reproduced at https://stackblitz.com/edit/vitejs-vite-x6rmew?file=index.html
npm run dev
npm run build && npm run start
Reproduction
https://stackblitz.com/edit/vitejs-vite-x6rmew?file=index.html
System Info
Used Package Manager
npm
Logs
No response
Validations