React|Cannot find module ‘@babel/preset-react‘ from ‘D:\学习\React相关\02.xxxxxt‘【转载】
在学习React过程中,发现在index.js文件中的JSX语法不能被识别。
刚开始报错的提示信息是“Support for the experimental syntax 'jsx' isn't currently enabled”。接着第二次又报“Cannot find module '@babel/preset-react' from 'D:\学习\React相关\02.xxxxxt'”错误。按照网上查的资料修改Babel文件,没有效果,终于在一篇博客上找到了解决办法,亲测有效。
问题产生的原因 babel-loader和babel-core版本不对应所产生的,
- babel-loader 8.x对应babel-core 7.x
- babel-loader 7.x对应babel-core 6.x
npm un babel-core
2、 安装新的babel-core
npm i -D @babel/core
3、 卸载旧的babel-preset
npm un babel-preset-env
npm un babel-preset-stage-0
4、 安装新的babel-preset
npm i @babel/preset-react
npm i @babel/preset-env
npm i babel-preset-mobx
5、 卸载旧的babel-plugin
npm un babel-plugin-transform-runtime
6、 安装新的babel-plugin
npm install --save-dev @babel/plugin-proposal-object-rest-spread
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
7、 修改.babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
- 如果你按上述命令安装完后,相应的版本应该如下图所示,问题也应该解决了。
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-preset-mobx": "^2.0.0",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"popper.js": "^1.14.6",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"@babel/runtime": "^7.2.0",
"bootstrap": "^4.2.1",
"jquery": "^3.3.1"
}
感谢这篇博客的指导https://blog.csdn.net/u011483658/article/details/95358715
推荐阅读
- 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 提示