Firebase的firebase-messaging-sw.js报import/require错误如何解决？

错误根因 #

1. Service Worker默认以经典脚本模式加载，不支持ES6 import 语法，所以触发Cannot use import statement outside a module报错；浏览器原生环境没有实现CommonJS规范的require方法，替换写法后自然触发require is not defined报错。
2. 配置存在冗余冲突：你同时在index.js中用file-loader引入Service Worker文件，又在OfflinePlugin中指定了同文件作为入口，两次打包逻辑冲突，没有正确转译模块化语法。

解决方案 #

最简方案（适配现代浏览器） #

直接修改push-notification.js中的Service Worker注册逻辑，指定加载模式为ES模块即可支持import语法：

navigator.serviceWorker
.register("./firebase-messaging-sw.js", {
  type: "module" // 新增这行配置
})

兼容旧浏览器方案 #

1. 先删除index.js中冗余的file-loader引入语句：

// 删掉这行
import 'file-loader?name=firebase-messaging-sw.js!./firebase-messaging-sw.js';

OfflinePlugin会自动处理Service Worker的打包输出，不需要重复引入。
2. 调整webpack的babel转译规则，确保firebase-messaging-sw.js会被babel处理，把ES6模块化语法转译为浏览器可直接运行的ES5语法。参考babel规则配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      include: [
        path.join(process.cwd(), 'app') // 包含app目录下所有js文件，包括sw文件
      ],
      use: ['babel-loader']
    }
  ]
}

额外注意事项 #

• 你的代码用的是Firebase v8的写法，如果后续升级到v9+版本，需要替换为firebase/compat兼容包，或者调整为新的模块化导入语法。
• Service Worker是独立的运行上下文，和页面主进程隔离，必须单独初始化Firebase实例，你当前的初始化逻辑是正确的。

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