Блог

Я использую react-app-rewired для настройки моего проекта CRA, поскольку у меня возникли проблемы с 2 сосуществующими версиями React, которые, я уверен, являются очень распространенным вариантом использования react-app-rewired/customize-cra .

Все было хорошо, пока я не потребовал установки react-native-calendars в качестве зависимости. Как вы можете видеть в моей addBabelPlugins конфигурации; Мне нужно было установить @babel/plugin-proposal-class-properties , чтобы перенести компоненты библиотек… Однако сейчас я получаю сообщение об ошибке, в котором жалуется на JSX в моей кодовой базе, которая, как я думал, уже будет обработана CRA в первую очередь, и, поскольку мы перезаписываем / расширяем CRA, react-app-rewired я не думал, что мне нужно будет добавлять дополнительные плагины / пресеты, такие как @babel/preset-react amp; @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'),
  }),
);
 

Оригинальная проблема здесь

Этот ответ устранил мою проблему.

Надеюсь, это поможет кому-то еще столкнуться с этой проблемой!

Замените параметр конфигурации jsx в jsconfig.json / tsconfig.json следующим образом:

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

Я нашел это здесь. И более подробная информация о jsconfig здесь: