Проблемы в файлах компонентов высокого порядка после извлечения из приложения Create React

Я использовал CRA 2.0 и хотел извлечь, чтобы можно было манипулировать конфигурациями. После извлечения я столкнулся с проблемой, из-за которой я получаю ошибку компиляции:

./src/web-app-commons/HOC/OverlayWrapper.jsx
SyntaxError: /Users/prabhjotrai/temp/client-web/src/web-app-commons/HOC/OverlayWrapper.jsx: Support for the experimental syntax 'classProperties' isn't currently enabled (33:22):

  31 | export default WrappedComponent => {
  32 |   return class extends Component {
> 33 |     static propTypes = {
     |                      ^
  34 |       overlayProps: PropTypes.shape({
  35 |         open: PropTypes.bool
  36 |       })

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Я перепробовал все, что связано с добавлением этого плагина (включая добавление @babel/plugin-proposal-class-properties в качестве зависимости разработчика и ссылку на него в конфигурации babel), и я предполагаю, что это связано с https://github.com/babel/babel/issues/8648. Но когда я удаляю этот конкретный файл, я получаю следующую ошибку:

./src/web-app-commons/HOC/Preview.jsx
SyntaxError: /Users/prabhjotrai/temp/client-web/src/web-app-commons/HOC/Preview.jsx: Support for the experimental syntax 'objectRestSpread' isn't currently enabled (60:3):

  58 |   persistent = true,
  59 |   overflowX = 'inherit',
> 60 |   ...props
     |   ^
  61 | } = {}) => WrappedComponent => {
  62 |   return class extends Component {
  63 |     displayName = `${WrappedComponent.displayName ||

Add @babel/plugin-proposal-object-rest-spread (https://git.io/vb4Ss) to the 'plugins' section of your Babel config to enable transformation.

Мое чутье подсказывает, что это что-то связано с компонентами с высоким порядком, поскольку я не получаю эту ошибку «распространения» или ошибку объявления свойств класса где-либо еще в коде. Есть идеи, что может пойти не так?

Вот мои зависимости babel:

~/temp/client-web   master ●  cat package.json | grep babel
    "@babel/core": "7.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-emotion": "^9.2.5",
    "babel-plugin-named-asset-import": "^0.2.2",
    "babel-preset-react-app": "^5.0.4",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-plugin-glamorous-to-emotion": "^1.0.1",
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  "babel": {
    "plugins": ["@babel/plugin-proposal-class-properties"]

Любая помощь могла бы быть полезна.

РЕДАКТИРОВАТЬ

Я добавил файл babelrc (удалив конфигурацию из package.json) со следующими деталями, но мне не повезло:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "react-app"
  ],
  "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-object-rest-spread"
  ]
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
206
1

Ответы 1

Распространение объекта по-прежнему является предложением, поэтому по умолчанию он недоступен в Babel.

Просто добавьте @ babel / plugin-scheme-object-rest-spread к плагинам, как они сказали

@PrabhjotRai Я упомянул вторую ошибку, но обе ошибки одинаковы. Обе вещи все еще находятся в предложении, что означает, что они не являются частью Babel по умолчанию, и вам необходимо использовать эти плагины.

Petar Popovic 15.10.2018 17:10

Я попытался добавить их, создав файл babelrc. Позвольте мне отредактировать сообщение, чтобы добавить и это.

psr 15.10.2018 17:17

Другие вопросы по теме