Open1

Next.js + Webpack5 + TypeScript でWebWorkerを動かすまで

AkatsukiAkatsuki

環境(2021/06/04)

  • Next.js: v10.1.0 (v10.2.xだと動かない模様)
  • CSR (これに従ってアプリ全体をCSRに)
  • Typescript + ESM (workerもTypeScript + ESMで書かれています)
  • webpack5 (next.config.js で future.webpack5true)
  • デプロイ先: 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' });
}, []);