custom-cra - 當前未啟用對實驗語法“jsx”的支持

Question

我正在使用 react-app-rewired 來配置我的 CRA 項目，因為我遇到了 2 個共存版本的 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.

配置覆蓋.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'),
  }),
);

原始問題在這里

Answer 1

這個答案解決了我的問題。

希望這可以幫助其他人面臨這個問題！

Answer 2

像這樣替換jsconfig.json / tsconfig.json中的 jsx 配置選項：

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

我在這里找到了。 更多關於 jsconfig 的信息在這里：