添加@googleapis/docs后遇Webpack错误，使用react-scripts无自定义配置

当你在react-scripts管理的项目中引入@googleapis/docs后遇到Can't resolve 'buffer'错误，是因为Webpack 5不再默认提供Node.js核心模块的polyfill。以下是针对无自定义Webpack配置的CRA项目的解决步骤：

方法一：使用Craco覆盖Webpack配置 #

Craco允许你在不 eject 项目的前提下修改CRA的Webpack配置，是最可靠的解决方案。

• 安装必要依赖

npm install @craco/craco buffer --save
# 或使用yarn
yarn add @craco/craco buffer

• 在项目根目录创建craco.config.js文件，写入以下配置：

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          buffer: require.resolve('buffer/')
        }
      }
    }
  }
};

• 修改package.json中的scripts命令，将原有的react-scripts替换为craco：

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

• 重启开发服务器，错误即可解决。

方法二：全局注入Buffer（临时应急方案） #

如果不想额外安装配置工具，可以尝试这种快速方案，但可能无法覆盖所有依赖场景：

• 先安装buffer依赖

npm install buffer --save
# 或yarn add buffer

• 在项目入口文件（如src/index.js）的最顶部添加以下代码：

import { Buffer } from 'buffer';
window.Buffer = Buffer;

• 重启开发服务器验证效果。

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