javascript - Upgrading from Babel 5.8.35 to 6.0.0 will not compile app.js with a SyntaxError and unexpected token

Question

I am in the process of upgrading all my ReactJS components with webpack.

In the process I have not been able to upgrade from babel 5 to 6. When I do so I get the following stack trace within my app.js class.

This code worked fine with :

"babel-core": "^5.8.35",
"babel-loader": "^5.3.3",

But broke once upgrading to 6.0.0

The code is:

var objectListMap = this.state.objects.map(object =>
      <EntityObject key={object.entity._links.self.href}
            object={object}
            jsonAttributes={jsonAttributes}
            attributes={this.state.attributes}
            onUpdate={this.onUpdate}
            onDelete={this.onDelete}/>
    );

The Stack trace is:

 ERROR in ./app.js
 Module build failed: SyntaxError: C:/Work 2016/GitHub/aaronmagi/miwdesign/mcb-server/src/main/resources/static/app.js: Unexpected token (292:3)
   290 |
   291 |          var objectListMap = this.state.objects.map(object =>
 > 292 |                  <EntityObject key={object.entity._links.self.href}
       |                  ^
   293 |                                          object={object}
   294 |                                          jsonAttributes={jsonAttributes}
   295 |                                          attributes={this.state.attributes}
     at Parser.pp.raise (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:1378:13)
     at Parser.pp.unexpected (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:2817:8)
     at Parser.pp.parseExprAtom (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:749:12)
     at Parser.pp.parseExprSubscripts (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:504:19)
     at Parser.pp.parseMaybeUnary (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:484:19)
     at Parser.pp.parseExprOps (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:415:19)
     at Parser.pp.parseMaybeConditional (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:397:19)
     at Parser.pp.parseMaybeAssign (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:360:19)
     at Parser.pp.parseFunctionBody (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:1116:22)
     at Parser.pp.parseArrowExpression (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:1104:8)
     at Parser.pp.parseExprAtom (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:664:21)
     at Parser.pp.parseExprSubscripts (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:504:19)
     at Parser.pp.parseMaybeUnary (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:484:19)
     at Parser.pp.parseExprOps (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:415:19)
     at Parser.pp.parseMaybeConditional (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:397:19)
     at Parser.pp.parseMaybeAssign (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:360:19)
     at Parser.pp.parseExprListItem (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:1206:16)
     at Parser.pp.parseCallExpressionArguments (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:580:20)
     at Parser.pp.parseSubscripts (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:543:29)
     at Parser.pp.parseExprSubscripts (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:514:15)
     at Parser.pp.parseMaybeUnary (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:484:19)
     at Parser.pp.parseExprOps (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:415:19)
     at Parser.pp.parseMaybeConditional (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:397:19)
     at Parser.pp.parseMaybeAssign (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:360:19)
     at Parser.pp.parseVar (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:2274:24)
     at Parser.pp.parseVarStatement (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:2121:8)
     at Parser.pp.parseStatement (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:1831:19)
     at Parser.pp.parseBlockBody (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:2208:21)
     at Parser.pp.parseBlock (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:2189:8)
     at Parser.pp.parseFunctionBody (C:Work 2016GitHubaaronmagimiwdesignmcb-serversrcmain
esourcesstatic
ode_modulesabylonindex.js:1125:22)

package.json

"dependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "rest": "^1.3.2",
    "sockjs-client": "^1.0.3",
    "stompjs": "^2.3.3",
    "webpack": "^1.13.0"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  }

webpack.config.js

  var path = require('path');

  var node_dir = __dirname + '/node_modules';

  module.exports = {
      entry: './app.js',
      devtool: 'sourcemaps',
      cache: true,
      debug: true,
      resolve: {
          alias: {
              'stompjs': node_dir + '/stompjs/lib/stomp.js',
              'when': node_dir + '/rest/node_modules/when/when.js'
          }
      },
      output: {
          path: __dirname,
          filename: './built/bundle.js'
      },
      module: {
          loaders: [
              {
                  test: path.join(__dirname, '.'),
                  exclude: /(node_modules)/,
                  loader: 'babel-loader'
                  // TODO remove for production
                  //loaders: ['react-hot','babel-loader']
              }
          ]
      }
  };

UPDATE: The solution was to add the .BABELRC file and update package.json

After adding .babelrc

{
  "presets": ["es2015", "react"]
}

I then needed to update package.json

"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",

Answer 1

You have to install the babel presets

react preset

es2015 preset

add a .babelr file to your project where you'll set up your presets

{
  "presets": ["es2015", "react"]
}

This is a good tutorial if you want to take a look.