Webpack throws a weird syntax error in JS file

Question

I have a simple file structure for my JS files:

bundle.js
src
 |
 -- main.js
 -- forms
       |
       -- forms.js

My main.js file looks like this:

let forms = require('./forms/forms');

And the forms.js files looks like this:

export default class Forms {
    test = () => {
        alert('Forms.test() executed!');
    }
}

var forms = new Forms();
forms.test();

This throws the following error:

Hash: a1ed74e596de181cec27
Version: webpack 1.14.0
Time: 21592ms
                Asset    Size  Chunks             Chunk Names
./static/js/bundle.js  277 kB       0  [emitted]  main
+ 3 hidden modules

ERROR in ./static/js/src/forms/forms.js
Module build failed: SyntaxError: Unexpected token (4:6)

  2 | 
  3 | export default class Forms {
> 4 |   test = () => {
    |        ^
  5 |       alert('Forms.test() executed!');
  6 |   }
  7 | }

 @ ./static/js/src/main.js 4:12-36

It's giving a syntax error about the line where the test() method is defined. I have added the babel-loader and in the main.js file, ES6 code is transpiled and executed correctly.

My webpack.config.js file looks like this:

module.exports = {
  entry: './static/js/src/main.js',
  output: {
    filename: './static/js/bundle.js'
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ],
  }
};

Does the babel-loader not correctly work on the forms.js file or something? I haven't excluded the file or its folder in the config file or anything, so why the syntax error? I know this is valid JS as I've written it in a different project and it worked fine.

Btw, import in the main.js file doesn't work either, while other ES6 features do work? Does that have anything to do with this?

Ori Drori · Accepted Answer · 2016-12-25T21:09:32.977

2

ES Class Fields & Static Properties is not part of ECMASCRECMAScript 2015 / 2016 but a stage 2 proposition.

To use it you need to configure babel to include the Class properties transform.

You can npm install just the Class properties transform plugin in your babel-loader query:

query: {
  presets: ['es2015'],
  plugins: ['transform-class-properties']
}

Or npm install the stage 2 preset and include it as a preset in your babel-loader query:

query: {
  presets: ['es2015', 'stage-2']
}

edited Dec 25 '16 at 21:09

answered Dec 25 '16 at 20:57

Ori Drori

183,571
29
224
209

Thanks! I just don't understand what you mean with `.babelrc`. Where can I find that file? I npm installed the class properties transform plugin and added the stage-2 preset to webpack.config.js under the babel loader, but it says: `Module build failed: Error: Couldn't find preset "stage-2" relative to directory`. – erol_smsr Dec 25 '16 at 21:09
1

I've updated the answer - if you installed the transform, include it as a plugin, if you installed stage2 preset, include it as a preset. Try it now. – Ori Drori Dec 25 '16 at 21:14
Alright it works now, thanks! I just npm installed class properties transform and modified the babel-loader query in webpack.config.js :) – erol_smsr Dec 25 '16 at 21:17
Good to know :) – Ori Drori Dec 25 '16 at 21:18

score 2 · Answer 2 · answered Dec 25 '16 at 20:58

2

You can define it as a regular method instead:

export default class Forms {
    test() {
        alert('Forms.test() executed!');
    }
}

answered Dec 25 '16 at 20:58

Scimonster

32,893
9
77
89

But what if I want to use arrow functions? I mean, in a previous project I could define methods the way I want to, but this time it gives me a syntax error? How can I make it possible? – erol_smsr Dec 25 '16 at 21:00
If defining with "traditional" method syntax is not satisfactory, check Ori's answer. – Scimonster Dec 25 '16 at 21:00
@erol_smsr I'm not sure why you would want to use arrow functions in this case. The syntax is more cumbersome, and isn't guaranteed to work in future versions of JavaScript. – 4castle Dec 25 '16 at 21:14

Webpack throws a weird syntax error in JS file

2 Answers2