aBloomer aBloomer - 2 months ago 8
React JSX Question

Why does my babel poyfill is not working?

Below is my webpack config:

var Path = require('path');

module.exports = {
entry: {
create: ['babel-polyfill', Path.resolve(__dirname, "./src/create.js")],
},
output: {
path: Path.resolve(__dirname, "../../public/crm/js/"),
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015,presets[]=react'
}
]
}
}


I also npm install these modules already:

"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.16.0"


And here is my create.js file:

import "babel-polyfill";
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Select extends Component {

//some code

onKeyDown = (e) => {
const {values} = this.props
const idx = values.indexOf(this.state.selection)
if (e.keyCode === 38 && idx > 0) { /* up */
this.setState({
selection: values[idx - 1]
})
} else if (e.keyCode === 40 && idx < values.length -1) { /* down */
this.setState({
selection: values[idx + 1]
})
}
this.fireOnSelect()
}

//some code

}


And here is my error message from console:

ERROR in ./src/create.js
Module build failed: SyntaxError: Unexpected token (36:12)

34 | }
35 |
> 36 | onKeyDown = (e) => {
| ^
37 | const {values} = this.props
38 | const idx = values.indexOf(this.state.selection)
39 | if (e.keyCode === 38 && idx > 0)


Did I do something wrong? Didn't I setup babel polypill correctly?

Answer

You need to use an additional Babel plugin to support class properties: transform-class-properties (alternatively, install the stage-1 or stage-2 preset).