SyntaxError: Unexpected token 'const' with babel-loader if babelrc is absent

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

Karma tests in PhantomJS fail with SyntaxError: Unexpected token 'const' when no .babelrc file is present at the root of the project. The project is using Webpack with babel-loader to transform ES2015+ files into ES5. The current WP module loading configuration is:

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {"presets": ["env"]}
            },
            {
                test: /\.scss$/,
                loaders: ["css-loader", "sass-loader"]
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        scss: ["vue-style-loader", "css-loader", "sass-loader"],
                        js: "babel-loader"
                    }
                }
            }
        ]
    },

Karma configuration is:

const wpConf = require("./webpack.config")
wpConf.devtool = "inline-source-map"

module.exports = config => {
    config.set({
        browsers:      ["PhantomJS"],
        files:         [
            "./node_modules/babel-polyfill/dist/polyfill.js",
            "./socialhome/**/app/tests/**/*\.tests\.js"
        ],
        frameworks:    ["mocha"],
        plugins:       [
            "karma-phantomjs-launcher",
            "karma-mocha",
            "karma-sourcemap-loader",
            "karma-webpack"
        ],
        preprocessors: {"./socialhome/**/app/tests/**/*\.tests\.js": ["webpack", "sourcemap"]},
        reporters:     ["dots"],
        singleRun:     true,
        webpack:       wpConf
    })
}

One of the peers dependancies (vue-masonry) of the file being tested uses the const keyword, which is ES2015. According to the configuration, it should be transpiled. But when launching Karma, the test fails with the following message:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
  at webpack:///node_modules/vue-masonry/src/masonry.plugin.js:5:1 <- socialhome/streams/app/tests/main.tests.js:11622

However, if you add a .babelrc file with the same preset configuration, which is {"presets": ["env"]}, the test passes.

If the current behavior is a bug, please provide the steps to reproduce.

You can test the problem live by cloning https://github.com/christophehenry/socialhome.git.

npm install -g phantomjs bower  # ensure you have phantomjs and bower installed
git clone https://github.com/christophehenry/socialhome.git
git checkout webpack-bug
npm install
bower install
npm run test  # it should fail with `SyntaxError: Unexpected token 'const'`
echo '{"presets": ["env"]}' > .babelrc
npm run test  # test should now pass

What is the expected behavior?

.babelrc should not be mandatory for babel to tranform ES2015+ code.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

Node 7.6.0 running on Linux 4.4.74 (Mageia 5) with PhantomJS 2.1.1 (latest) installed. Full package.json available here.

[christophehenry]

@sokra I lost 3 hours yesterday trying to make your tool to work because I know how frustrating it is when someone opens an issue on Github because he/she hasn’t read the documentation properly. I tried to provide a working example in a seperate branch, a procedure you just have to paste in you terminal to reproduce and you, don’t even bother asking a few questions because my toolchain is too complex for you? Please tell me, if you don’t find time to answer me on Github, how will you to answer me on SO?

[sokra]

Did you just at least tried to reproduce the problem?

no

We receive many issues per day I don’t have the time to reproduce all issues. I try to filter for problems with webpack. Your issue doesn’t look like related to webpack. It’s maybe a babel-loader or babel-core problem, but most likely you are using the babel-loader incorrectly.

Considering your repo is gigantic and involves many tools, it would take at least hour to get it running. It’s definitely not a minimal repro repo…

I could also close the issue with:

Please submit support requests and questions to StackOverflow using the tag [webpack]. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.