旧React项目本地运行报错：无法解析'querystring'依赖

你的问题源于React Scripts 5.0.1使用Webpack 5，而Webpack 5不再默认提供Node.js核心模块的polyfill，你依赖的wikibase-sdk（通过immersion-presentation间接引入）用到了Node的querystring模块，导致编译报错。不用 eject 也能解决，下面是两种可行方案：

方案一：通过别名替换为浏览器兼容的querystring实现 #

这种方式最简单，直接把querystring模块指向浏览器可用的polyfill：

1. 安装所需依赖

yarn add querystring-es3 react-app-rewired customize-cra --dev

• querystring-es3是querystring模块的浏览器兼容版本
• react-app-rewired和customize-cra用来在不eject的情况下修改Webpack配置

2. 在项目根目录创建config-overrides.js文件

const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  // 把node的querystring别名到浏览器兼容版本
  addWebpackAlias({
    'querystring': 'querystring-es3'
  })
);

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

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject",
  "pdf": "node ./node_modules/immersion-presentation/make-pdf"
}

4. 重新启动项目

yarn start

方案二：使用Node Polyfill插件（更全面的polyfill方案） #

如果后续还遇到其他Node核心模块缺失的问题，可以用这个方案一次性补全：

1. 安装依赖

yarn add react-app-rewired customize-cra node-polyfill-webpack-plugin --dev

2. 修改config-overrides.js

const { override, addWebpackPlugin } = require('customize-cra');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = override(
  addWebpackPlugin(new NodePolyfillPlugin())
);

3. 同样修改package.json的脚本为react-app-rewired开头，然后重启项目

问题根源说明 #

Webpack 5之前的版本会自动为Node.js核心模块（比如querystring、path等）提供polyfill，但Webpack 5移除了这一默认行为，目的是减少打包体积，让开发者按需添加需要的polyfill。你的项目依赖的wikibase-sdk是为Node环境开发的库，所以它直接使用了Node的querystring模块，在浏览器环境下就需要手动补充。

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