Open1
Next.js + Webpack5 + TypeScript でWebWorkerを動かすまで
環境(2021/06/04)
- Next.js: v10.1.0 (v10.2.xだと動かない模様)
- CSR (これに従ってアプリ全体をCSRに)
- Typescript + ESM (workerもTypeScript + ESMで書かれています)
- webpack5 (next.config.js で
future.webpack5
をtrue
) - デプロイ先: Vercel
結論
// next.config.js
module.exports = {
webpack: (config, { isServer, dev }) => {
config.resolve.fallback = { fs: false, module: false }; // これは個人的に使っているtwin.macroのためのもの
// これが必要(https://github.com/vercel/next.js/issues/22813#issuecomment-810961712)
config.output.chunkFilename = isServer
? `${dev ? "[name]" : "[name].[fullhash]"}.js`
: `static/chunks/${dev ? "[name]" : "[name].[fullhash]"}.js`;
return config
},
future: {
webpack5: true,
},
}
// useEffect下じゃないとダメっぽい?
// webpack5を導入する必要あり それ以前はwebpackのworkerのloaderを自前導入する必要あり
// `{ type: 'module' }`は指定しなくても動きそう
// パスは相対パスで得に縛りはなさそう
useEffect(() => {
const w = new Worker(new URL('../src/video/worker.ts', import.meta.url), { type: 'module' });
}, []);