[英]React Redux can't resolve its own modules
When I run webpack for my project, I get this error suggesting that the React-Redux package can't resolve some of its internal modules:当我为我的项目运行 webpack 时,我收到此错误提示 React-Redux package 无法解析其某些内部模块:
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
Does anyoe have any idea how to resolve this?有谁知道如何解决这个问题? Could it possibly be because I installed react-redux before redux?
可能是因为我在 redux 之前安装了 react-redux 吗? If so, how could I fix it.
如果是这样,我该如何解决它。 I already tried deleting
package-lock.json
and deleting node_modules
and re-running npm install
.我已经尝试删除
package-lock.json
并删除node_modules
并重新运行npm install
。 I also dug into the filesystem and found that the unresolvable modules exist on the filesystem;我还挖掘了文件系统,发现文件系统上存在无法解析的模块; for example, even though webpack can't resolve
./components/Provider
, the file node_modules/react-redux/es/Provider.js
exists and looks fine.例如,即使 webpack 无法解析
./components/Provider
,文件node_modules/react-redux/es/Provider.js
存在并且看起来不错。
Here is the relevant part of package.json
.这是
package.json
的相关部分。 Could it be a version mismatch or something?可能是版本不匹配还是什么?
"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": {}
Awesome, I finally got it to work.太棒了,我终于让它工作了。 What did the trick in the end was deleting the whole project folder and re-installing it from GitHub.
最后的诀窍是删除整个项目文件夹并从 GitHub 重新安装它。 There must have been something wrong with the installed
node_modules
that even rm -rf
couldn't fix.安装的
node_modules
肯定有问题,甚至rm -rf
也无法修复。
EDIT: I lied.编辑:我撒谎了。 Apparently, when I deleted the project and reloaded it from GitHub, I accidentally reset the commit where I had added all of the Redux stuff, and as soon as I brought it back, the error returned as well.
显然,当我删除项目并从 GitHub 重新加载它时,我不小心重置了我添加了所有 Redux 东西的提交,一旦我把它带回来,错误也返回了。 What actuallly happened was an error in my
webpack.config.js
file:实际发生的是我的webpack.config.js文件中的
webpack.config.js
:
What I had was "extensions": [".ts", ".tsx"]
我所拥有的是
"extensions": [".ts", ".tsx"]
What I needed was "extensions": [".ts", ".tsx", ".js"]
我需要的是
"extensions": [".ts", ".tsx", ".js"]
Thus, even though the JS files were there, Webpack had been ignoring them because the ".js"
extension was missing from my config file.因此,即使 JS 文件在那里,Webpack 一直忽略它们,因为我的配置文件中缺少
".js"
扩展名。 Adding in those four characters fixed the problem.添加这四个字符解决了这个问题。 And so ends a several-hour-long session of debugging.
就这样结束了长达数小时的 session 的调试。 Hope this helps anyone else stupid enough to screw up their Webpack config and then try to use it to load React-Redux.
希望这可以帮助其他愚蠢的人搞砸他们的 Webpack 配置,然后尝试使用它来加载 React-Redux。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.