按Splunk教程创建React组件启动Demo时编译报错求助

方法1：使用node-polyfill-webpack-plugin自动补全polyfill #

• 进入packages/react-todo-list目录，安装插件：

  yarn add node-polyfill-webpack-plugin --dev
  

• 找到项目中的webpack配置文件（通常为webpack.config.js或demo/webpack.config.js），修改配置：
  1. 引入插件：

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

  2. 在plugins数组中添加该插件：

     module.exports = {
       // ...其他已有配置
       plugins: [
         // ...已有插件
         new NodePolyfillPlugin()
       ]
     };
     

• 重新运行yarn run start:demo

方法2：手动安装querystring的浏览器兼容替代包 #

• 进入packages/react-todo-list目录，安装兼容包：

  yarn add querystring-es3
  

• 修改webpack配置文件，添加resolve.fallback配置：

  module.exports = {
    // ...其他已有配置
    resolve: {
      fallback: {
        "querystring": require.resolve("querystring-es3")
      }
    }
  };
  

• 重新启动Demo服务

补充说明 #

你的Node.js版本为v20（较新版本），对应的webpack 5默认移除了Node.js核心模块的polyfill，而Splunk的旧版依赖仍在使用这些模块，通过上述两种方法补全polyfill即可解决编译错误。

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