Unable to load stage-3 javascript file using babel-loader from webpack

Question

Overview

Following the Auth0 documentation , they have a JavaScript file that has field variables (stage-3) . When running my app, I get the following error:

ERROR in ./src/auth/AuthService.js
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| 
| export default class AuthService {
|   authenticated = this.isAuthenticated();
|   authNotifier = new EventEmitter();
| 

Above, the unexpected token is the first = sign after authenticated .

Diagnosing the Error

1. Downloading and running the sample project from Auth0's Github works successfully.

2. Running the following command using babel-cli parses the file successfully:

    $ node node_modules\\babel-cli\\bin\\babel.js src\\auth\\AuthService.js --presets stage-3 

3. It is only when I run the application that the error is thrown, so I suspect there's something fishy in the webpack config.

My Configuration

The following is my .babelrc config:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": ["transform-runtime"]
}

I've only included the relevant parts of my webpack config, but can provide the full file if necessary:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '..', 'src')],
      },
      // ...
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json'],

  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

// ...

Dependencies Info

The following are the babel/webpack dependency versions in my project:

"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"webpack": "^3.6.0",

With All That Said

How can I further figure out what is causing the error to be thrown? It's pretty specific, but it's clear that babel can process the file just fine using the babel-cli . After spending many hours researching this issue, trying different options in the webpack config, using .babelrc and forcing webpack to not use it, using stage-2 instead of stage-3 , I feel like I've tried everything.

My configuration isn't much different than the one in Auth0's sample project. Copying and pasting their .babelrc file into mine as well as their js webpack rules didn't seem to have an effect either; I just can't get it to work with my project.

Answer 1

I've found that most people that have had webpack problems (after ruling out the loader issue) have the issue because there is something incorrect setup in your webpack config.

For my webpack config, I needed to change this:

  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '..', 'src')],
      },
      // ...
    ]
  },

to this:

  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      // ...
    ]
  },

Because my webpack.config.js file existed under src , so the issue might've been that the .. argument in my include property wasn't pointing to the right folder to look for .js files in.

I needed to exclude node_modules because it would otherwise try to parse files in that directory.