Create React App集成Minio遇process未定义错误求助

核心原因 #

Webpack 5默认移除了Node.js核心模块的polyfill，而Minio的依赖（如levelup下的readable-stream）需要全局的process变量，因此引发报错。

解决步骤（推荐使用react-app-rewired） #

1. 安装必要依赖

npm install react-app-rewired process --save-dev

2. 在项目根目录创建config-overrides.js文件，添加如下配置：

const webpack = require('webpack');

module.exports = function override(config) {
  // 注入process相关全局变量
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
      'process.version': JSON.stringify(process.version)
    })
  );

  // 补充缺失的Node.js模块polyfill
  config.resolve.fallback = {
    ...config.resolve.fallback,
    process: require.resolve('process/browser'),
    stream: require.resolve('stream-browserify'),
    crypto: require.resolve('crypto-browserify'),
    buffer: require.resolve('buffer/'),
    util: require.resolve('util/'),
    path: require.resolve('path-browserify')
  };

  // 全局提供Buffer和process对象
  config.plugins.push(
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  );

  return config;
};

3. 修改package.json中的启动脚本，替换react-scripts为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

4. 重启开发服务

npm start

替代方案：使用Craco #

若更倾向于Craco工具，可按以下步骤操作：

1. 安装依赖

npm install @craco/craco process stream-browserify crypto-browserify buffer util path-browserify --save-dev

2. 创建craco.config.js文件：

const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          'process.env': JSON.stringify(process.env),
          'process.version': JSON.stringify(process.version)
        }),
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser'
        })
      ]
    },
    configure: (webpackConfig) => {
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        process: require.resolve('process/browser'),
        stream: require.resolve('stream-browserify'),
        crypto: require.resolve('crypto-browserify'),
        buffer: require.resolve('buffer/'),
        util: require.resolve('util/'),
        path: require.resolve('path-browserify')
      };
      return webpackConfig;
    }
  }
};

3. 修改package.json脚本：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

额外注意事项 #

• 浏览器端使用Minio SDK时，避免调用仅Node.js支持的API（如本地文件系统操作）。
• 若选择eject项目直接修改webpack配置，该操作不可逆，需谨慎执行。

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