vercel
[turbopack] [webworker] After import webworker, can not execute webworker script
What version of Turbopack are you using?
I don't know exactly, but I'm using "next": "13.1.5" with next dev --turbo.
What package manager are you using / does the bug impact?
pnpm
What operating system are you using?
Linux
Describe the Bug
After I import webworker script with new URL():
const plusWorker = new Worker(new URL('../workers/task-name', import.meta.url));
I develop with the next dev --turbo script, but unfortunately, the following error occurred:
Refused to execute script from 'http://localhost:3000/_next/static/assets/d6f517fec7dcd080.ts' because its MIME type ('video/vnd.dlna.mpeg-tts') is not executable.
You can see full source code at here.
Then, I back to webpack with the next dev script, everything works fine!
Here is the complete code. src/pages/index.tsx file's content:
import Head from 'next/head';
import styles from '@/styles/Home.module.css';
import { useEffect } from 'react';
export default function Home() {
useEffect(() => {
const plusWorker = new Worker(new URL('../workers/plus', import.meta.url));
plusWorker.onmessage = (event) => {
console.log('🍏 Message received from worker: ', event.data);
};
plusWorker.onerror = (event) => {
if (event instanceof Event) {
console.log('🍎 Error message received from worker: ', event);
return event;
}
console.log('🍎 Unexpected error: ', event);
throw event;
};
plusWorker.postMessage([1, 2]);
return () => {
plusWorker.terminate();
};
}, []);
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className={styles.description}>
<p>Get started by editing</p>
</div>
</main>
</>
);
}
src/workers/plus.ts file's content:
import { TWorkerMess } from '@/models';
const onmessage = (event: MessageEvent<TWorkerMess>) => {
console.log('🐝 Worker: Message received from main script');
const data = event.data;
const result = data[0] + data[1];
const workerResult = 'Result: ' + result;
console.log('🐝 Worker: Posting message back to main script');
postMessage(workerResult);
};
addEventListener('message', onmessage);
src/models/worker.ts file's content:
export type TWorkerMess = number[];
When run next dev or pnpm dev output on console log is below:
🐝 Worker: Message received from main script
🐝 Worker: Posting message back to main script
🍏 Message received from worker: Result: 3
Expected Behavior
I can execute webworker script with turbopack.
To Reproduce
Described in the Bug detail.
Reproduction Repo
https://github.com/loclv/nextjs-template/tree/feature/web-worker-turbopack-bug
same issue, also without turbo, has to resort to disabling turbo, enabling webpack and InjectManifest from workbox-webpack-plugin to deposit a .js file in public/ and then call my service worker like this const registration = await navigator.serviceWorker.register('/stream-sw.js', { scope: './' }); avoiding the import.meta.url stuff.
would be nice to have direct support for both typescripted web workers and service workers.
new Worker() is not supported in Turbopack yet. We're planning to add it after Turbopack is stable in Next.js.
is not supported in Turbopack yet. We're planning to add it after Turbopack is sta
im was searching and searching and searching about this and there is not one mention in the whole nextjs docs, you should add this to people struglling with this.
Since release 14.2 is claiming that 99.8% of tests are passing, is Worker among those remaining 0.2% ? I agree that adding this information to the documentation would be of great value. Maybe even with a tracking reference to know when it'll be available. Thanks a lot !
It's already in the docs: https://nextjs.org/docs/architecture/turbopack#unsupported-features