React.js 18+与Webpack 5.x.x环境下安装MinIO报错求助

这些错误的核心原因是Webpack 5不再默认提供Node.js核心模块的polyfill，而MinIO的JavaScript SDK原本设计用于Node.js环境，依赖fs、stream、path等Node.js内置模块，浏览器环境中没有这些模块，因此出现找不到的报错。

解决方案步骤： #

1. 安装所需的polyfill依赖

执行以下命令安装浏览器端替代这些Node.js模块的包：

npm install stream-browserify path-browserify crypto-browserify http-browserify https-browserify timers-browserify buffer process --save-dev

2. 修改Webpack配置（webpack.config.js）

在你的Webpack配置文件中添加resolve.fallback配置，同时添加插件处理全局变量：

const webpack = require('webpack');

module.exports = {
  // ...其他原有配置
  resolve: {
    fallback: {
      "stream": require.resolve("stream-browserify"),
      "path": require.resolve("path-browserify"),
      "fs": false, // 浏览器无法使用文件系统模块，直接禁用
      "crypto": require.resolve("crypto-browserify"),
      "http": require.resolve("http-browserify"),
      "https": require.resolve("https-browserify"),
      "timers": require.resolve("timers-browserify"),
      "buffer": require.resolve("buffer/")
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ],
  node: {
    global: true
  }
};

3. 如果你使用Create React App（CRA）

CRA默认隐藏Webpack配置，需要用craco覆盖配置：

• 先安装craco：

npm install @craco/craco --save-dev

• 在项目根目录创建craco.config.js：

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        "stream": require.resolve("stream-browserify"),
        "path": require.resolve("path-browserify"),
        "fs": false,
        "crypto": require.resolve("crypto-browserify"),
        "http": require.resolve("http-browserify"),
        "https": require.resolve("https-browserify"),
        "timers": require.resolve("timers-browserify"),
        "buffer": require.resolve("buffer/")
      };
      webpackConfig.plugins.push(
        new webpack.ProvidePlugin({
          Buffer: ['buffer', 'Buffer'],
          process: 'process/browser'
        })
      );
      return webpackConfig;
    }
  }
};

• 修改package.json的启动脚本，替换react-scripts为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

额外说明

• fs模块设为false是因为浏览器无法访问本地文件系统，MinIO SDK在浏览器环境下会自动跳过相关操作，不影响对象存储的正常调用。
• 完成依赖安装和配置修改后，重启开发服务器即可解决所有模块找不到的错误。

内容的提问来源于stack exchange，提问作者Hồ Nguyễn