#reactjs #create-react-app #react-app-rewired #customize-cra
#reactjs #create-react-app #react-app-перемонтировано #настройка-cra
Вопрос:
Я использую 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'),
}),
);
Оригинальная проблема здесь
Комментарии:
1. Проверьте мой ответ ниже, дайте мне знать, помогает ли это.
Ответ №1:
Этот ответ устранил мою проблему.
Надеюсь, это поможет кому-то еще столкнуться с этой проблемой!
Ответ №2:
Замените параметр конфигурации jsx в jsconfig.json
/ tsconfig.json
следующим образом:
{
"compilerOptions": {
...
- "jsx": "react-jsx"
"jsx": "react"
}
}
Я нашел это здесь. И более подробная информация о jsconfig здесь:
Комментарии:
1. Спасибо за ваш ответ. я создал файл jsconfig.json и разместил
{ "jsx": "react" }
его как содержимое, но, боюсь, без кубиков.2. о, это неправильно, я полагаю, у вас уже есть конфигурация, я исправлю ответ
3. Нет, извините, это не работает. я думаю, что это связано не с VSCode, а с babel.
4. Спасибо за вашу помощь, смотрите Ниже мой ответ