0

This is my .babelrc:

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

Here's where the error comes from. \client\src\components\AddBook.js:

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

The error message

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

I thought @babel/preset-env took care of all the latest JavaScript syntax. What does make the code break? The complete repo is on https://github.com/ElAnonimo/booklist

El Anonimo
  • 1,759
  • 3
  • 24
  • 38

1 Answers1

2

Your .babelrc does not explicitly define which browsers/versions it is supposed to transpile code for.

Adjust the following sample .babelrc to your needs:

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

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

Also when using webpack you need to tell babel-loader explicitly to respect .babelrc and where it is located.

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

, assuming .babelrc is located in your project's root directory.

connexo
  • 53,704
  • 14
  • 91
  • 128
  • Thank you. I've adjusted `.babelrc` to `{ "presets": [ [ "@babel/preset-env", { "targets": { "browsers": ["last 2 versions", "Firefox >= 50"] } }, "@babel/preset-react" ] ] }` I'm on Firefox 50. Now getting `[1] 3 | import App from './components/App'; [1] 4 | [1] > 5 | ReactDOM.render(, document.getElementById('app')); [1] | ^` It complains about `<` in ``. – El Anonimo Dec 19 '18 at 13:57
  • Does this has to do with `loader: 'babel-loader'` in the webpack config? – El Anonimo Dec 19 '18 at 14:03
  • 1
    You need to tell `babel-loader` explicitly to respect `.babelrc` and where it is located. `loader: 'babel-loader', options: { babelrc: path.join(process.cwd(), './babelrc') }`, asumming `.babelrc` is in your project's root directory. – connexo Dec 20 '18 at 09:10