node.js - 运行反应应用程序时发现重复的 __self 道具
问题描述
当我在反应应用程序中运行 npm run 时出现此错误:
Syntax Error index.js: Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel
plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config
7 | ReactDOM.render(
8 | <React.StrictMode>
> 9 | <App />
| ^^^^^^^
10 | </React.StrictMode>,
11 | document.getElementById('root')
12 | );
我的项目中没有 babel 配置文件,也找不到 react 已经在使用的配置文件。我该如何解决这个问题?
package.json 依赖项(我之前运行过 npm run injection 但没有粘贴所有依赖项以使其更短):
"dependencies": {
"@babel/core": "^7.14.3",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.7",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^10.0.0",
"bfj": "^7.0.2",
"html-webpack-plugin": "4.5.0",
"identity-obj-proxy": "3.0.0",
"jest": "26.6.0",
"jest-circus": "26.6.0",
"jest-resolve": "26.6.0",
"jest-watch-typeahead": "0.6.1",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-dev-utils": "^11.0.3",
"react-dom": "^17.0.2",
"react-refresh": "^0.8.3",
"semver": "7.3.2",
"style-loader": "1.3.0",
"terser-webpack-plugin": "4.2.3",
"ts-pnp": "1.2.0",
"url-loader": "4.1.1",
"web-vitals": "^1.0.1",
"webpack": "4.44.2",
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
},
解决方案
查看这个答案React Native Jest SyntaxError: Duplicate __self prop found
另请参阅:https ://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
更新 @babel/core 和 @babel/plugin-transform-react-jsx
npm update @babel/core @babel/plugin-transform-react-jsx
or
yarn upgrade @babel/core @babel/plugin-transform-react-jsx
然后添加一个文件.babelrc
// If you're using @babel/plugin-transform-react-jsx
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}
推荐阅读
- reactjs - 我应该在 React.js 中加密本地存储吗?
- python - 我如何在python中正确调用这个函数?
- javascript - 使用来自服务器的数据填充 Angular 的响应式表单
- reactjs - 如何使用 typescript 扩展 React 库命名空间
- c++ - 使用 string.length() 作为 for 循环的结尾时,C++ 字符串订阅超出范围
- iis - IIS/Pool/Web API / 池下的第一个请求需要很长时间
- java - Java AES GCM javax.crypto.AEADBadTagException:标签不匹配
- c# - CSV 助手。如何在扩展方法中调用 MemberMap 的 ConvertUsing?
- r - 如何在r中找到第一次观察和前两个连续负面观察之间的观察次数
- python - Pyrhon:获取当前月份的月份日期?