React JS使用xlsx-populate后遭遇Module not found: Can't resolve 'crypto'与'fs'错误的解决求助

我之前在React项目里用xlsx-populate时也踩过完全一样的坑！这个问题本质是xlsx-populate原本是为Node.js环境开发的，依赖了Node核心模块crypto和fs，但webpack 5之后不再默认给浏览器环境polyfill这些模块，所以才会报找不到的错误。你之前试的方法没生效，大概率是配置位置不对或者没处理全依赖项，下面给你一步步解决的方案：

1. 安装必要的依赖包 #

首先需要安装crypto-browserify（用来polyfill crypto模块）、stream-browserify（crypto-browserify的依赖），以及process和buffer（处理其他可能的Node环境依赖）：

npm install crypto-browserify stream-browserify process buffer --save-dev

2. 配置Webpack（分两种项目类型） #

如果你用的是Create React App（CRA） #

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

1. 先安装craco：

npm install @craco/craco --save-dev

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

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 配置resolve.fallback，处理Node核心模块
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        fs: false // 浏览器环境不需要fs，直接禁用
      };

      // 添加必要的插件，模拟Node环境的process和Buffer
      webpackConfig.plugins.push(
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer']
        })
      );

      return webpackConfig;
    }
  }
};

3. 修改package.json里的scripts，把react-scripts替换成craco：

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

如果你用的是自定义Webpack配置的项目 #

直接在你的webpack.config.js里添加以下配置：

const webpack = require('webpack');

module.exports = {
  // ...你的其他Webpack配置
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify'),
      fs: false
    }
  },
  plugins: [
    // ...你的其他插件
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

3. 验证并重启项目 #

删除node_modules/.cache（如果有的话），然后重启开发服务器：

npm start

补充建议 #

如果你的需求只是在浏览器端读写Excel，其实更推荐用SheetJS的xlsx库（npm install xlsx），它是专门为浏览器和Node.js双环境设计的，不需要额外配置polyfill，使用起来更省心。

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