[英]customize-cra - Support for the experimental syntax 'jsx' isn't currently enabled
I am using react-app-rewired to configure my CRA project as I was having issues with 2 co-existing versions of React which I'm sure is a very common use-case for react-app-rewired/customize-cra
.我正在使用 react-app-rewired 来配置我的 CRA 项目,因为我遇到了 2 个共存版本的 React 问题,我确信这是
react-app-rewired/customize-cra
的一个非常常见的用例。
Everything has been fine until I required installing react-native-calendars
as a dependency.一切都很好,直到我需要安装
react-native-calendars
作为依赖项。 As you can see in my addBabelPlugins
config;正如您在我的
addBabelPlugins
配置中看到的那样; I have needed to install @babel/plugin-proposal-class-properties
to transpile the libraries' components... I am now however getting an error that complains about JSX in my codebase which I thought would already be handled by CRA in the first place and seeing as we are overwriting/extending CRA with react-app-rewired
i didn't think I would need to add additional plugins/presets such as @babel/preset-react
& @babel/plugin-syntax-jsx
...我需要安装
@babel/plugin-proposal-class-properties
来转译库的组件......然而,我现在收到一个错误,抱怨我的代码库中的 JSX,我认为这已经由 CRA 处理了放置并看到我们正在使用react-app-rewired
覆盖/扩展 CRA,我认为我不需要添加其他插件/预设,例如@babel/preset-react
和@babel/plugin-syntax-jsx
...
can somebody point me in the right direction?有人可以指出我正确的方向吗? I'm hoping this issue is common and I have just searched the issues page poorly.
我希望这个问题很常见,我刚刚搜索的问题页面很糟糕。
Thank you谢谢
react@17.0.1
react-scripts@3.4.3
customize-cra@1.0.0
npm@6.14.9
node@14.8.0
Failed to compile.
./src/App.js
SyntaxError: /Users/.../src/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (28:5):
26 |
27 | return (
> 28 | <Router>
| ^
29 | <Switch>
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
const {
override,
addWebpackAlias,
babelInclude,
addBabelPresets,
addBabelPlugins,
} = require('customize-cra');
module.exports = override(
babelInclude([
require.resolve('./src'),
require.resolve('./node_modules/react-native-calendars'),
]),
...addBabelPresets(
'@babel/preset-react',
),
...addBabelPlugins(
'@babel/plugin-proposal-class-properties', // <~ needed for react-native-calendars
'@babel/plugin-syntax-jsx',
),
addWebpackAlias({
react: require.resolve('./node_modules/react'),
}),
);
This answer fixed my issue. 这个答案解决了我的问题。
Hopefully, this helps someone else facing this issue!希望这可以帮助其他人面临这个问题!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.