Webpack с babel-загрузчиком не может проанализировать компонент функции реакции

#javascript #reactjs #webpack #babeljs

#javascript #reactjs #webpack #babeljs

Вопрос:

Я нахожусь в процессе огромного рефакторинга проекта, в котором мне нужно обновить кучу библиотек, однако я сталкиваюсь с ошибкой всякий раз, когда пытаюсь скомпилировать проект с помощью webpack:

 ERROR in ./node_modules/sequoia-react-component-library/src/containers/ConnectedSignIn/index.js 12:31
Module parse failed: Unexpected token (12:31)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| // eslint-disable-next-line react/prop-types
> const errorWrapper = props => (<div className='errors'>{ props.children }</div>);
| 
| const getValidityClass = ({ fieldValue }) => {
@ ./src/views/sign-in/sign-in.js 34:0-93 70:46-61
@ ./src/views/sign-in/index.js
@ ./src/App.js
@ ./src/loader.js
@ ./src/index.js
@ multi ./src/index.js
  

Итак, оказывается, что это связано с конфигурацией babel-loader, которую я настроил следующим образом:

       {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },

  

И babel.config.json:

 {
    "presets": [
      "@babel/preset-env", 
      "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties"]

}
  

Сначала я подумал, что это проблема с другой конфигурацией файлов babel. Сначала я попробовал с .babelrc, но в документе указано, что это работает только для конфигураций проектов с одним файлом, а не для широкой конфигурации проектов, с которой babel.config.json может управлять этим, но оказывается, что это довольно хорошо работает со всеми корневыми файлами, но не с теми, которые помещены в node_modules . Я не знаю, что я мог пропустить, и я не знаю, как на самом деле babel применяет правила в term, чтобы следить за файлами для анализа и переноса.

Кто-нибудь, кто мог бы дать мне немного света?

Спасибо!

Комментарии:

1. можете ли вы поделиться своими версиями babel и react?

2. Конечно, это версия, которую я получил: @babel /core: 7.11.6 @babel /preset-env: 7.11.5 @babel / preset-react: 7.0.0 реакция: 16.13.1 babel-loader: 8.0.6

3. Я предполагаю, что sequoia-react-component-library у этого есть некоторый jsx, который не передается. и поскольку вы исключаете все node_modules, он не преобразуется.

4. Попробуйте изменить расширение вашего файла на .js , что временно исправило его для меня

Ответ №1:

Попробуйте это:

 {
  test: /.(js|jsx)$/,
  /* removed exclude: /node_modules/, */
  loader: "babel-loader"
},
  

Поскольку поврежденный файл находится внутри модуля узла, попробуйте прокомментировать исключение, и это также должно перенести эти файлы react.