React项目使用Material UI出现TypeError: __webpack_require__.i(...) is not a function

问题根源分析 #

从你的package.json配置能看到几个核心冲突点：

• dependencies和devDependencies中同时存在不同版本的react-scripts（5.0.1和1.0.0），直接导致Webpack等构建工具版本混乱，触发模块加载错误。
• 手动安装了webpack和webpack-cli，但create-react-app本身已集成适配版本，手动安装的高版本会和内置版本冲突。
• @mui/styled-engine-sc是MUI适配styled-components的引擎，但你同时安装了Emotion相关依赖，两种样式引擎可能存在兼容性问题。

具体修复步骤 #

1. 清理冲突依赖
   修改package.json，删除以下内容：

   • devDependencies中的react-scripts、webpack、webpack-cli
   • （可选）若无需用styled-components作为MUI样式引擎，删除@mui/styled-engine-sc和styled-components，改用MUI默认的Emotion引擎，更适配你已安装的Emotion依赖。

   修改后的package.json核心部分示例：

   {
     "dependencies": {
       "@emotion/react": "^11.11.0",
       "@emotion/styled": "^11.11.0",
       "@mui/material": "^5.13.0",
       "firebase": "^9.21.0",
       "howler": "^2.2.3",
       "lodash": "^4.17.21",
       "papaparse": "^5.4.1",
       "react": "^18.0.0",
       "react-dom": "^18.0.0",
       "react-scripts": "5.0.1",
       "react-select": "^5.7.3"
     },
     "devDependencies": {
       "@babel/core": "^7.21.8",
       "@babel/preset-env": "^7.21.5",
       "babel-loader": "^9.1.2"
     },
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test --env=jsdom",
       "eject": "react-scripts eject"
     }
   }
   

2. 清理缓存并重装依赖
   执行命令：

   rm -rf node_modules package-lock.json
   npm install
   

   若使用yarn：

   rm -rf node_modules yarn.lock
   yarn install
   

3. 验证组件数据格式
   确保getSongsList()返回有效数组（空数组或包含对象/字符串的数组），Autocomplete的options属性必须为数组类型，避免数据格式错误引发后续问题。

额外提示 #

• 新手不要在未eject的create-react-app项目中手动安装Webpack相关依赖，内置版本已做适配。
• MUI默认使用Emotion作为样式引擎，无特殊需求无需额外安装@mui/styled-engine-sc和styled-components，可减少兼容性问题。

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