React-Redux无法解析内部模块问题求助

问题描述 #

我在使用Webpack构建React项目时，遇到了React-Redux包无法解析内部模块的错误，具体报错信息如下：

ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './components/Context' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 3:0-57 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './components/Provider' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 1:0-45 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './components/connectAdvanced' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 2:0-59 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './connect/connect' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 4:0-40 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './hooks/useDispatch' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 5:0-70 12:0-179 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './hooks/useSelector' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 6:0-70 12:0-179 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './hooks/useStore' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 7:0-61 12:0-179 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './utils/batch' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 8:0-41 11:0-8 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './utils/reactBatchedUpdates' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 9:0-79 11:9-14 12:0-179 @ ./index.tsx
ERROR in ./node_modules/react-redux/es/index.js Module not found: Error: Can't resolve './utils/shallowEqual' in '/home/.../frontend/src/node_modules/react-redux/es' @ ./node_modules/react-redux/es/index.js 10:0-48 12:0-179 @ ./index.tsx

我已经尝试过删除package-lock.json和node_modules后重新运行npm install，并且确认文件系统中这些无法解析的模块实际存在（比如node_modules/react-redux/es/Provider.js确实存在且正常）。另外我怀疑是不是因为先安装了react-redux再安装redux导致的问题？以下是我的package.json相关依赖：

"devDependencies": {
  "@types/classnames": "^2.2.9",
  "@types/react": "^16.9.9",
  "@types/react-dom": "^16.9.1",
  "@types/react-redux": "^7.1.5",
  "@types/redux": "^3.6.0",
  "@typescript-eslint/eslint-plugin": "^2.4.0",
  "@typescript-eslint/parser": "^2.4.0",
  "eslint": "^6.5.1",
  "eslint-config-airbnb": "^18.0.1",
  "eslint-import-resolver-typescript": "^2.0.0",
  "eslint-plugin-import": "^2.18.2",
  "eslint-plugin-jsx-a11y": "^6.2.3",
  "eslint-plugin-react": "^7.16.0",
  "eslint-plugin-react-hooks": "^1.7.0",
  "prop-types": "^15.7.2",
  "react": "^16.10.2",
  "react-dom": "^16.10.2",
  "react-redux": "^7.1.1",
  "redux": "^4.0.4",
  "source-map-loader": "^0.2.4",
  "ts-loader": "^6.2.0",
  "typescript": "^3.6.4",
  "typescript-eslint": "0.0.1-alpha.0",
  "webpack": "^4.41.0",
  "webpack-cli": "^3.3.9"
},
"dependencies": {}

解决方案 #

1. 检查Webpack的模块解析配置 #

这大概率是Webpack没配置好，找不到.js后缀的文件。打开你的webpack.config.js，看看resolve.extensions里有没有加.js——毕竟React-Redux的内部文件都是.js格式的，如果Webpack只认.ts/.tsx，自然会找不到目标文件。

正确的配置应该包含.js：

module.exports = {
  // ...其他配置项
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'] // 一定要把.js加上！
  }
};

2. 修复类型定义版本冲突 #

我注意到你安装的@types/redux是3.6.0，但实际使用的redux是4.0.4——这俩版本不匹配！虽然不一定直接导致模块找不到，但类型定义和实际库版本不一致很容易引发各种奇怪的问题。

解决方法很简单：先卸载旧的类型定义，安装对应4.x版本的：

npm uninstall @types/redux
npm install @types/redux@^4.0.0 --save-dev

或者更省事的是直接删掉@types/redux依赖，因为@types/react-redux已经自带了适配redux 4.x的类型定义，不用单独安装。

3. 彻底清理缓存再重装依赖 #

有时候npm缓存会搞事情，导致文件损坏。除了删除node_modules和package-lock.json，记得清理一下npm缓存：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

这样重装出来的依赖应该是完全干净的。

4. 检查文件权限 #

虽然你说文件存在，但也有可能Webpack进程没有读取这些文件的权限。可以给react-redux目录添加可读权限：

chmod -R 755 node_modules/react-redux

5. 版本兼容性确认（你的版本其实没问题） #

看了你的依赖版本，react-redux@7.1.1和react@16.10.2、redux@4.0.4是完全兼容的，所以版本不匹配不是你当前的问题。不过如果前面的步骤都没用，可以试试升级react-redux到最新的兼容版本：

npm update react-redux

关于“先装react-redux再装redux”的疑问 #

放心，安装顺序不会导致这个问题！因为react-redux本身依赖redux，当你安装react-redux的时候，npm会自动帮你安装对应的redux版本，除非你手动指定了不兼容的redux版本。所以这个不是你当前问题的根源。

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