Incorrect content type when using typescript worker in dev server
ericvergnaud opened this issue · comments
Bug report
When creating a typescript worker, the browser fails to load the transpired worker code because its content type is 'video/mp2t' (sourced from mime-db)
See for example: https://stackoverflow.com/questions/74357942/webpack-refuses-execute-script-because-its-mime-type-video-mp2t-is-not-execu
or andywer/threads.js#387
Actual Behavior
The worker code is correctly transpiled, however when returned to the browser, the content type header is set to 'video/mp2t', which causes the browser to fail loading the transpiled code.
Expected Behavior
The content type header should be set to "application/javascript", such that the browser can properly execute it.
How Do We Reproduce?
Simply create a worker:
const worker = new Worker(new URL("./my_worker.ts", import.meta.url));
and run the code in dev.
Please paste the results of npx webpack-cli info here, and mention other relevant information
System:
OS: macOS 13.0
CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
Memory: 21.32 MB / 32.00 GB
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Browsers:
Chrome: 109.0.5414.119
Firefox: 95.0.2
Safari: 16.1
Global Packages:
webpack-cli: 5.0.1
webpack: 5.75.0
The project was created using create-react-app with typescript
Can you create reproducible test repo, I think you have a problem with configuration, there is not ts content-type, your worker should have the js extension
My worker is written in Typescript, so it has the tsextension (it's not a content-type)
new Worker(new URL("./TeknaWorkerThread.ts" , import.meta.url ), { type: "module"});
If I use .jsin the above example I get the following error:
Module not found: Error: Can't resolve './TeknaWorkerThread.js' in ...
Debugging the dev server, I found that the above call translates into an HTTP GET /static/.../TeknaWorkerThread.SOMEHASH.ts
Then the ts is transpiled to js. But middleware infers the content type from the ts extension.
My proposed fix is precisely to treat as js
I'll try to provide a simple reproducible example in the coming days, please don't close.
Check the links in the report, many people have bumped into this issue (and some of them have gone through extreme workarounds).
Creating a project from scratch with a simple worker does not exhibit the issue.
This could be a side effect of using acejs, needing more exploration.
Closing
Just note - ts is still part of js ecosystem, so after transpiling the worker file should have js extensions, there is not ts content-type, ts is a part of js, like you can't have raw react code or vue code for execable files