Неожиданный токен {с Webpack 4 и @ babel / preset-env

Question

Это мое .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Вот откуда возникла ошибка.\ client \ src \ components \ AddBook.js:

const { handleSubmit, pristine, reset, submitting } = this.props;

Сообщение об ошибке

   11 |   }
   12 |
 > 13 |   const { handleSubmit, pristine, reset, submitting } = this.props;
      |         ^
   14 |
   15 |   const handleSubmit = (allValues) => {
   16 |     console.log('formData:', allValues);

Я думал, что @babel/preset-env позаботился обо всех последних версиях JavaScriptсинтаксис.Что заставляет код ломаться?Полное репо на https://github.com/ElAnonimo/booklist

Answer 1

Ваш .babelrc явно не определяет, для каких браузеров / версий он должен передавать код.

Настройте следующий образец .babelrc в соответствии с вашими потребностями:

{"presets": [
    [ "@babel/preset-env", {
      "targets": {
        "browsers": ["last 1 version", "ie >= 11"]
      },
      "@babel/preset-react"
    ]
]}

https://babeljs.io/docs/en/babel-preset-env#targets

Кроме того, при использовании веб-пакета вам необходимо явно указать babel-loader в отношении .babelrc и где он находится.

loader: 'babel-loader',
options: {
  babelrc: path.join(process.cwd(), './babelrc')
}

при условии, что .babelrc находится в корневом каталоге вашего проекта.