customize-cra -对实验语法'jsx‘的支持当前未启用

Question

我正在使用react-app-rewired来配置我的CRA项目，因为我在使用React的两个共存版本时遇到了问题，我确信这是react-app-rewired/customize-cra的一个非常常见的用例。

在我要求将react-native-calendars作为依赖项安装之前，一切都很好。正如您在我的addBabelPlugins配置中看到的；我需要安装@babel/plugin-proposal-class-properties来转换库的组件……然而，我现在收到了一个错误，它抱怨我的代码库中的JSX，我认为它一开始就已经被CRA处理了，并且看到我们正在用react-app-rewired覆盖/扩展CRA，我认为我不需要添加额外的插件/预设，比如@babel/preset-react和@babel/plugin-syntax-jsx……

谁能给我指个方向？我希望这个问题是常见的，我只是搜索了问题页面很糟糕。

谢谢

信息

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.

config-overrides.js

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'),
  }),
);

原始问题here

Answer 1

This answer解决了我的问题。

希望这对其他面临这个问题的人有所帮助！

Answer 2

替换jsconfig.json/tsconfig.json中的jsx配置选项，如下所示：

{
  "compilerOptions": {
    ...
-   "jsx": "react-jsx"
+   "jsx": "react"
  }
}

我找到那个here了。有关jsconfig的更多信息，请访问here