React CRA TypeScript项目启动报错：ReferenceError: process is not defined

核心原因 #

CRA 5及以上版本采用Webpack 5，不再默认向浏览器环境注入process对象；同时path、mime-types属于Node.js核心模块，浏览器环境原生不支持，导致依赖这些模块的代码触发报错。

解决方案 #

1. 通过Craco配置Webpack补全环境与模块兼容 #

• 安装浏览器兼容版的path模块：

  npm install path-browserify --save-dev
  

• 修改craco.config.ts（或craco.config.js）：

  import { defineConfig } from '@craco/craco';
  import webpack from 'webpack';
  
  export default defineConfig({
    webpack: {
      plugins: [
        // 向浏览器环境注入process.env对象
        new webpack.DefinePlugin({
          'process.env': JSON.stringify(process.env),
        }),
      ],
      resolve: {
        fallback: {
          // 用浏览器兼容版替代Node.js原生path模块
          path: require.resolve('path-browserify'),
          // 若有其他Node模块报错，可按需处理：不需要的模块直接设为false
          // fs: false,
        },
      },
    },
  });
  

2. 替换Node.js专属依赖为浏览器兼容版本 #

若报错根源是mime-types，可替换为专为浏览器设计的mime库：

• 卸载原依赖：

  npm uninstall mime-types
  

• 安装兼容库：

  npm install mime --save
  

• 替换项目中所有import * as mime from 'mime-types'为import * as mime from 'mime'

3. 排查第三方依赖的引入场景 #

确认是否有依赖在浏览器代码中意外引入了Node.js专属模块，部分工具库会同时提供Node和浏览器版本，需确保导入的是浏览器兼容分支。

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