NX/React工作区Service Worker注册失败（import相关报错）求解

三个报错的核心原因是直接将未编译的service-worker.js源码作为静态资源输出，缺失Workbox依赖打包环节：

1. 初始MIME type报错是构建产物目录缺失service-worker.js，服务返回了兜底的HTML页面，你通过添加assets配置修复了资源寻址问题，但没有解决SW文件的编译问题
2. 「Cannot use import statement outside a module」报错是因为Service Worker默认运行环境不支持裸ES Import语法
3. 手动给SW加type:module后出现的模块解析报错，是因为浏览器无法直接识别workbox-core这类npm包的裸导入路径，这类依赖必须经过构建工具打包合并为单文件后才能在浏览器端运行

修复步骤 #

1. 修正静态资源配置 #

打开对应app目录下的project.json，找到build配置里的assets数组，删除"apps/core/src/service-worker.js"这一项。manifest.json、robots.txt这类不需要编译的纯静态资源可以保留。

注意：service-worker.js包含npm依赖，不能直接作为静态资源复制到产物目录，必须经过构建编译。

2. 集成Workbox构建能力 #

根据项目使用的构建工具选择对应配置：

若使用Vite构建

在apps/core/project.json的build target -> options节点下添加Workbox配置，指定SW源码路径和输出路径：

"workbox": {
  "swSrc": "apps/core/src/service-worker.js",
  "swDest": "service-worker.js",
  "importWorkboxFrom": "local",
  "globPatterns": ["**/*.{js,css,html,ico,png,svg,webp,woff2}"]
}

配置后NX构建时会自动调用workbox编译SW文件，注入预缓存资源列表，将所有workbox依赖打包进最终输出的service-worker.js中。

若使用Webpack构建

在app对应的webpack配置文件中添加InjectManifest插件：

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  // 保留原有其他webpack配置
  plugins: [
    // 保留原有其他插件
    new InjectManifest({
      swSrc: './apps/core/src/service-worker.js',
      swDest: 'service-worker.js'
    })
  ]
}

3. 调整SW注册逻辑 #

移除之前给Service Worker注册添加的type: 'module'配置，保持你最初在main.tsx里写的注册逻辑即可，swUrl路径沿用你适配NX的配置：

// serviceWorkerRegistration.js 中保持这个路径配置即可
const swUrl = `${process.env.NX_PUBLIC_URL}/service-worker.js`;
registerValidSW(swUrl, config);

验证方式 #

• 执行生产构建命令，检查构建产物目录下的service-worker.js：文件内不存在import { xxx } from 'workbox-xxx'这类裸导入语句，所有workbox逻辑都已被打包进文件
• 启动生产预览服务，直接访问{你的域名}/service-worker.js，响应头的Content-Type为application/javascript，无404或返回HTML的情况
• 打开浏览器DevTools -> Application -> Service Workers，清理掉之前注册失败的旧SW，硬刷新页面后即可看到SW正常注册，你配置的onSuccess回调会正常触发

注意事项 #

• 开发模式下NX默认不会编译输出Service Worker，SW相关逻辑必须在生产构建后的预览环境下验证
• 如果SW更新后不生效，记得勾选DevTools里Service Workers面板的Update on reload选项，避免旧SW缓存影响

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