Parsing error: Unexpected character '@'

[jfeldstein]

Hi, I'm using webpack, babel-loader and the following webpack.config.js

...
module: {
        preLoaders: [{
            test: /\.js$/,
            loader: "eslint?fix=true&configFile=.eslintrc.webpack.json",
            exclude: /(node_modules|bower_components)/
        }],
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel', // 'babel-loader' is also a legal name to reference
            query: {
                presets: [
                    'es2015',
                    'react',
                    'stage-0'
                ],
                plugins: [
                    'lodash',
                    'transform-decorators-legacy',
                    'export-default-module-exports',
                    ['transform-es2015-modules-commonjs-simple', {
                        noMangle: true
                    }]
                ],
                compact: false,
                sourceMaps: true
            }
        },
...

I have no .babelrc.

However, when I run webpack, it complains about the @ syntax.

Reproducable with the following file:

// Vendors
const React = require('react');
import autobind from 'autobind-decorator'

@autobind
class AccountSettingsInputContainer extends React.Component {

}
export default AccountSettingsInputContainer;

Package.json includes:

"autobind-decorator": "^1.3.3",
    "autoprefixer": "^6.3.6",
    "babel-cli": "^6.10.1",
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-autobind-class-methods": "^1.0.4",
    "babel-plugin-export-default-module-exports": "^0.0.4",
    "babel-plugin-lodash": "^3.2.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
    "babel-polyfill": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",

I thought stage-0 was supposed to give me the ability to write:

class ClassName extends Other {
    boundMethod = () => {
        // ...
    }
}

But I can't do that, either. Wondering if it just isn't something in my config. Anyone notice anything odd?

[lehcosta]

Hello @jfeldstein , run npm install babel-eslint --save-dev and add this setting to your package.json

"standard": { "parser": "babel-eslint" },

reference: http://standardjs.com/#can-i-use-a-custom-js-parser-for-bleeding-edge-es6-or-es7-support

[ThaJay]

what the ..., this is so random

but it works. Thank you so much @lehcosta