0

In my React setup, I have the following devdependencies in the package.json file -

"devDependencies": {
    "@babel/core": "^7.0.0-beta.53",
    "@babel/preset-env": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0-beta.53",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  }

I was trying out couple of ways to get the babel setup to work and this is what I noticed. If I have the below .babelrc file it works fine -

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

However, if I have the preset with the most basic setting as mentioned in the babel docs it errors out.

{
  "presets": ["env"]
}

I get the Syntax Error: Unexpected token at the of my index.js file. Link to another docs mentions this -

We don't recommend using preset-env this way because it doesn't take advantage of its ability to target specific browsers.

Why does the recommended approach error out here? Something wrong with my devDependencies?

Error message:

> ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/XXXXXX//src/index.js: Unexpected token (7:4)
5 | const App = () => {
6 |   return (
7 |     <div>
  |     ^
  • 2
    You don't use react preset in the second .babelrc file, are you sure it's not the problem ? – Pierre Capo Jul 13 '18 at 17:45
  • Pierre - I've updated the question to include more details about the error. –  Jul 13 '18 at 17:48
  • 1
    You are not using the `react` preset in your second example, so Babel doesn't know how to interpret the JSX in your code. – Tholle Jul 13 '18 at 17:48
  • @Tholle - I haven't added a JSX file yet, it is only index.js as of now. If I do include react preset, I see this - "Error: Plugin/Preset files are not allowed to export objects, only functions" –  Jul 13 '18 at 17:51
  • The error you have in your question is from the first character in `
    `, which is JSX.
     – Tholle Jul 13 '18 at 17:53
  • 1
    Ok, found the answer - the syntax for preset is changed and that fixed it. Somehow I couldn't find it in the docs. Also, thank @Tholle I missed that react preset. –  Jul 13 '18 at 17:57
  • The error "Plugin/Preset files are not allowed" has an answer here - https://stackoverflow.com/questions/49182862/preset-files-are-not-allowed-to-export-objects so I don't want to put this as an answer to my original question. –  Jul 13 '18 at 18:01

0 Answers0