vite build: Wrong mime-type (e.g. video/mp2t) when using import workerUrl from './my-worker.js?url syntax

[schickling]

Describe the bug

When using the ?url worker import syntax e.g. import workerUrl from './my-worker.js?url syntax, Vite currently infers the wrong mime-type. I guess in the case of TS it should re-write it to .js instead like it does for the ?worker behaviour.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gjqkkn?file=dist/assets/index.c7da7740.js

System Info

Stackblitz

Used Package Manager

npm

Logs

Output file:

(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&n(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?r.credentials="include":e.crossorigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function n(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();
const i="data:video/mp2t;base64,aW1wb3J0IHsgdmFsIH0gZnJvbSAnLi9jb3VudGVyLmpzJzsKCnNlbGYuYWRkRXZlbnRMaXN0ZW5lcignbWVzc2FnZScsICgpID0+IHsKICBjb25zb2xlLmxvZyhgaGVsbG8gZnJvbSB3b3JrZXIgJHt0ZXN0Lnh9ICR7dmFsfWApOwp9KTsKCm5hbWVzcGFjZSB0ZXN0IHsKICBleHBvcnQgY29uc3QgeCA9ICd0cy1vbmx5LWZlYXR1cmUnOwp9Cg==",l=new Worker(i,{type:"module"});l.postMessage("");

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.

Related

#2642

[sapphi-red]

I guess this is a duplicate of #6979.

If you are going to obtain worker url, I think you'll need to use import workerUrl from './my-worker.js?worker&url'.
Because ?url will return the url of a raw file content (TS won't be transpiled, #9952).

[bluwy]

Ah yeah looks like so, I should've looked carefully 😅 I'll close this in favor of that then

[schickling]

Thanks for the comments.

Probably another issue but TypeScript doesn't seem to like ?worker&url imports.

[sapphi-red]

Probably another issue but TypeScript doesn't seem to like ?worker&url imports.

Thanks. Created a PR for it: #10299