React项目导入request模块报错，模块解析失败求解决方案

问题原因 #

报错指向buffer/index.js解析失败，核心原因有两点：

• 你当前使用的babel-preset-es2015已废弃，对新语法的转译支持不足
• Webpack默认排除了node_modules目录的转译，而request依赖的buffer模块包含未转译的ES语法，导致Webpack无法解析

解决步骤 #

1. 更新Babel依赖并替换预设 #

卸载旧的过时preset，安装最新的Babel工具链：

npm uninstall babel-preset-es2015 babel-preset-stage-0
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

2. 修改.babelrc配置 #

更新为最新的预设：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

3. 调整Webpack配置，让Babel处理buffer相关模块 #

Webpack默认排除了node_modules，但buffer模块需要转译，修改module.rules里的babel-loader规则，指定需要处理的目录：

module: {
  rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      // 包含自己的源码和需要转译的依赖模块
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'node_modules/buffer'),
        path.resolve(__dirname, 'node_modules/safe-buffer')
      ],
      query: {
        presets: ['@babel/preset-env', '@babel/preset-react']
      }
    },
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    }
  ]
}

4. 补充Node.js环境polyfill（可选但推荐） #

request是为Node.js设计的模块，在浏览器环境运行需要补充Node.js内置模块的polyfill，安装并配置相关插件：

npm install node-polyfill-webpack-plugin --save-dev

在Webpack配置里引入并使用：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new NodePolyfillPlugin()
  ]
}

5. 替代方案：改用浏览器端HTTP库 #

如果上述配置仍有问题，建议直接使用专为浏览器设计的HTTP客户端，比如axios，避免Node.js模块带来的兼容性问题：

npm install axios --save

替换导入代码：

import axios from 'axios';

// 示例请求
axios.get('https://example.com/api')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

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