react|react Cannot find module 'node_modules/_react-scripts/config/webpack.config.dev
【react|react Cannot find module 'node_modules/_react-scripts/config/webpack.config.dev】原来运行得好好的react项目,突然运行不成功了,提示如下错误
$ npm start> react-app-rewired startinternal/modules/cjs/loader.js:589
throw err;
^Error: Cannot find module 'D:\my_project\node_modules\react-scripts/config/webpack.config.dev.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
at Function.Module._load (internal/modules/cjs/loader.js:513:25)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (D:\my_project\node_modules\react-app-rewired\scripts\start.js:18:23)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my_project@0.1.0 start: `react-app-rewired start --scripts-version react-scripts-ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_project@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!C:\Users\...\AppData\Roaming\npm-cache\_logs\2019-01-19T10_56_58_751Z-debug.log
经过四处寻找,在github找到了原因解释,只不过他的解释是针对使用了ts下的react项目,但是原理相同内容如下
This has been caused by recent changes to CRA (2.1.2) where they merged the webpack.config.dev.js and webpack.config.prod.js into a single file webpack.config.js. See #343 and #345 for more details on the change.
The adjustment to paths made in react-app-rewired in order to continue to be able to be used with CRA looks for a react-scripts version number greater than or equal to 2.1.2. The react-scripts-ts version number has been higher than that for the last ~18 months, so react-app-rewired is treating it according to the merged webpack config instead of the split one.
To solve it, you'll need to install an older version of react-app-rewired that doesn't have this change. I believe the last version of react-app-rewired that will be compatible with react-scripts-ts is version 1.6.2. The versions for 2.x have the breaking change to support CRA 2.1.2 and beyond that is misfiring on react-scripts-ts.
Use yarn add react-app-rewired@1.6.2 or npm install react-app-rewired@1.6.2 to step back to the last of the 1.x versions of react-app-rewired - it will install the older version and lock the version number to exactly that version so that it doesn't get upgraded to a newer version accidentally in future.大致意思就是react-app-rewired这个插件升级导致了不会单独生成dev和prod配置文件了,所以导致文件找不到。需要将react-app-rewired版本固定在1.6.2,这样处理能解决上面的问题,
但是又出现了一个新问题,大致内容是can not find module react_script/package.json
分析应该也是版本问题导致的,所以通过git版本回退找到了以前的代码的package.json中react_script的使用版本是2.0.3,所以将版本也固定在了2.0.3
删掉node_modules目录,重新执行npm install
npm start 启动项目,成功启动并打开浏览器tab页。
推荐阅读
- react|react 安装
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- cannot|cannot be read or is not a valid ZIP file
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- 运行报错Cannot|运行报错Cannot find module '@babel/compat-data/corejs3-shipped-proposals’
- Flutter|Flutter SwiftUI React 对比
- React|React refs和onRefs的使用
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示