Next.js突发错误：拒绝执行worker.ts脚本，因其MIME类型video/mp2t不可执行

问题根本原因 #

你遇到的是Next.js开发服务器的已知MIME类型映射bug，.ts后缀被错误匹配到了MPEG-TS视频流的video/mp2t类型，和你写的worker业务代码无关，你的代码逻辑没有语法错误。

可行解决方案 #

• 优先清理缓存重启服务：停止当前运行的Next.js开发服务，依次删除.next缓存目录、node_modules/.cache目录，再重新执行npm run dev启动服务，90%以上的同类缓存类问题都会被修复。
• 如果清理缓存无效，可在next.config.js中配置响应头强制指定worker文件的MIME类型，配置示例如下：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/workers/:path*.ts',
        headers: [
          {
            key: 'Content-Type',
            value: 'application/javascript',
          },
        ],
      },
    ]
  },
}

• 临时规避方案：给worker的URL添加随机查询参数跳过缓存，修改示例：

const zipper = new Worker(
  new URL('../workers/zipper.worker.ts?nocache=' + Date.now(), import.meta.url),
);

• 额外注意：你当前的代码是在worker内部嵌套创建另外两个子worker，Next.js开发模式对嵌套worker的编译处理存在缺陷，如果以上方案都无效，可先将嵌套worker的逻辑迁移到主线程测试验证。

内容的提问来源于stack exchange，提问作者polisen