React(TS)+Webpack+Babel转PWA时出现process未定义报错

process is not defined报错的核心原因是：

1. 你使用的Service Worker注册逻辑参考了Create React App脚手架的内置代码，其中的process.env.PUBLIC_URL是CRA脚手架在构建时自动注入的环境变量，你手动搭建的自定义Webpack项目默认没有配置这个变量。
2. Webpack 5 版本默认不再为浏览器端代码自动注入Node.js环境的process全局对象polyfill，你的Webpack配置里也没有手动通过插件定义process.env相关变量，浏览器运行到读取process.env.PUBLIC_URL的代码时，找不到全局process对象就会抛出引用错误。

你可以任选以下一种方案修复：

• 方案1：通过Webpack插件注入对应环境变量，完全适配现有代码
  第一步：打开webpack.config.js，在文件顶部引入webpack模块：

  const webpack = require("webpack");
  

  第二步：在配置的plugins数组中添加DefinePlugin配置，声明process.env.PUBLIC_URL的值，本地开发、部署到站点根路径时设为空字符串即可，如果后续要部署到站点子路径，替换成对应子路径字符串：

  plugins: [
    htmlWebPackPlugin,
    workBoxPlugin_Generate,
    // 新增以下配置
    new webpack.DefinePlugin({
      "process.env.PUBLIC_URL": JSON.stringify(""),
    }),
  ],
  

• 方案2：直接修改注册逻辑代码，去掉对process.env的依赖，无需调整Webpack配置
  Workbox默认会将生成的Service Worker文件输出到构建产物根目录，你直接修改service-worker.tsx中两处引用process.env.PUBLIC_URL的代码即可：

  export default function register() {
    if ("serviceWorker" in navigator) {
      // 原代码读取process.env.PUBLIC_URL的部分替换为当前域名
      const publicUrl = new URL(window.location.origin);
      if (publicUrl.origin !== window.location.origin) {
        return;
      }
  
      window.addEventListener("load", () => {
        // 原代码拼接process.env.PUBLIC_URL的部分替换为根路径
        const swUrl = `/service-worker.js`;
        // 后续逻辑保持不变
        if (isLocalhost) {
          checkValidServiceWorker(swUrl);
          navigator.serviceWorker.ready.then(() => {
            console.log(
              "This web app is being served cache-first by a service worker.",
            );
          });
        } else {
          registerValidSW(swUrl);
        }
      });
    }
  }
  

• 额外优化建议：你当前存放SW注册逻辑的文件命名为service-worker.tsx，很容易和Workbox构建生成的service-worker.js产生命名冲突、路径解析错误，建议将该注册逻辑文件重命名为serviceWorkerRegistration.ts这类和实际SW文件名不冲突的名称。

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