Babel-loader: Webpacking JSX File: Unexpected token <

[mikelambert]

Possibly a dupe of https://github.com/babel/babel-loader/issues/173 or https://github.com/babel/babel-loader/issues/198, but I've read them and their misconfigured webpack configs, and I'm still stumped as to why my minimal (and correct?) repro case fails.

I am running: webpack --debug --config dummy.webpack.js
and get output:

Hash: 8612a6709b7db70da49e
Version: webpack 1.12.12
Time: 2633ms
    + 1 hidden modules

ERROR in ./dummy.jsx
Module parse failed: /Users/lambert/Projects/dancedeets/node_modules/babel-loader/index.js?{"presets":["react","es2015"]}!/Users/lambert/Projects/dancedeets/dummy.jsx Line 4: Unexpected token <
You may need an appropriate loader to handle this file type.
| var Test = React.createClass({
|   render: function() {
|     return (<button>Hi</button>);
|   },
| });

where dummy.webpack.js is:

module.exports = {
  entry: './dummy.jsx',
  output: {
    filename: 'dummy.js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015'],
        },
      },
    ],
  },
};

and dummy.jsx is:

var React = require('react');
var Test = React.createClass({
  render: function() {
    return (<button>Hi</button>);
  },
});

I even tried upgrading my relevant packages to the latest-and-greatest, without any change in errors:

    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.13"

Is there something wrong with my simple webpack config? Or are there any other dotfiles or hidden config that could be interfering? Thanks...

[mikelambert]

Hmmm it seems by moving these two files to a new directory (and reinstalling all npm dependences), webpack works. I will dig deeper and report back (dotfiles? node_modules/? not sure yet)

[mikelambert]

Sigh, seems it was due to a .babelrc I had:

{
  "presets": ["es2015"],
  // Remove the line below to enable ES2015 support.
  "only": "gulpfile.babel.js",
  "retainLines": true
}

which was due to my grabbing too much from https://github.com/google/web-starter-kit .

Two questions:

• Should the .babelrc override the webpack config? Or is the precedence undefined there?
• Is this something worth bringing up with the web-starter-kit folks? Any projects based on that will be very confused if/when they start using React/Babel...

[loganfsmyth]

For Babel we generally encourage people to use a babelrc rather than passing options to the loader. It leads to confusion like this.

[mikelambert]

The prominent Usage examples on https://github.com/babel/babel-loader seem to indicate otherwise. :)

[Couto]

@mikelambert the examples were written when babelrc was not the norm
Feel free to PR some more up-to-date examples :)

[frederickbrock]

ERROR in ./~/fsevents/~/har-validator/lib/schemas/creator.json
Module parse failed: /Users/frederickbrock/projects/wboard/LightningBoard/node_modules/fsevents/node_modules/har-validator/lib/schemas/creator.json Unexpected token (2:8)

when I run webpack --debug webpack.config.js

package-json:

{
  "name": "LightningBoard",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel-polyfill": "^6.9.1",
    "lodash": "^4.13.1",
    "pubnub": "^3.15.1",
    "react": "15.1.0",
    "react-native": "0.28.0",
    "react-native-canvas": "[email protected]:frederickbrock/react-native-canvas.git#master",
    "react-redux": "^4.4.5"
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.0.15",
    "babel-preset-stage-2": "^6.11.0",
    "json-loader": "^0.5.4",
    "webpack": "^1.9.6",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.0.0"
  }
}

bablerc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
   "plugins": ["transform-react-jsx"]
}

[loganfsmyth]

@frederickbrock The file being parsed is a .json file, so I wouldn't expect Babel to be running on that. Sounds like you have a webpack config issue.

[d3viant0ne]

Resolving this as a resolution exists in the issue for the reported problem. It's been tagged to ensure the docs get updated. Thanks @mikelambert :)

@frederickbrock - Your issue is directly related to your webpack config not the babel-loader as it should be fed .json