Strange Webpack Build Error

1

I’m currently working on the voting app and I’m just starting to test all of my modules to see if they work, by running the server. However, when I do so, I’m presented with a Webpack build error stating “Unexpected token” errors for these types of functions and objects:

static contextTypes = {
     |                             ^
  15 |         authenticated: React.PropTypes.bool,
  16 |         user: React.PropTypes.object
  17 |     };

and

componentDidMount = () => {
     |                                 ^

It’s only showing problems with modules with this kind of syntax. I figured it wasn’t recognizing the es6, but all of my other modules are running fine. I have no idea why it’s giving this error.

2

The error arrows are supposed to be pointing at the assignment operator.

3

I cleaned up your code (but it didn’t help much).
You need to use triple backticks to post code to the forum.
See this post for details.

Could you post a link to your repo? I’d be interested in seeing your code.

4

Thanks! I’ll remember to do this in the future. This is my repo: https://github.com/codefu-chivy/pollers-app

5

Hi @codefu-chivy

The problem is you’re using the static class property, which is in the es7 draft, without an appropriate babel transform.

The easiest way to get babel to transpile those properties is to use a stage-x preset: https://babeljs.io/docs/plugins/.

stage-2 has the transform-class-properties plugin in it, although, I tend to use stage-0 as it encompasses all 3 stages and includes things like object spread.

npm install --save-dev babel-preset-stage-0

// babelrc
presets: ['es2015', 'react', 'stage-0']

That should fix the issue.

FYI, you don’t need the presets inside the webpack config as well, just having the babelrc is fine.

1 Like
6

Thanks a lot! I had actually installed and saved stage-0 to my package.json but I didn’t include it in my .babelrc. I honestly didn’t know what it was for. Thanks for the advice!

1 Like