Webpack Babel Arrow Function Module Build Error

Question

I am attempting to run a few arrow functions within my react code, but despite adding babel loaders to build the code in a readable format, I am receiving an error at the = portion of my arrow functions.

export default class CommentForm extends React.Component {
    constructor(props){
        super(props);
        ...
        this.state = {
            value: '',
            flash: '',
            suggestions: [],
        };

        this.onChange = this.onChange.bind(this);
        this.focus = this.focus.bind(this);
    }
    ...
    onChange = (editorState) => {
        this.setState({
            suggestions: ['test']
        });
    }
    ...
}

Error:

ERROR in ./public/components/app/activity-feed/feed/VerticalTimeline/CommentComponents/CommentForm.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (150:13)

webpack.config.js:

module.exports = {
    mode: 'development',
    entry: "./public/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {   
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
};

package.json:

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    ....
  }

FYI If you use arrow function syntax, you can't bind them to an object. Remove the this.onChange = this.onChange.bind(this); in your constructor. — Derek
– Derek, Commented Jan 31, 2019 at 1:41
Thanks for the answer. I removed the bind, but still receiving the same error. Any other suggestions? — cphill
– cphill, Commented Jan 31, 2019 at 1:43
what's your babel configuration look like? .babelrc, package.json, wherever you're keeping it — Derek
– Derek, Commented Jan 31, 2019 at 1:45
{ presets: [ "es2015", "react" ] }, which is located in .babelrc — cphill
– cphill, Commented Jan 31, 2019 at 1:49

Alex Michailidis · Accepted Answer · 2019-01-31 11:36:23Z

2

You are trying to define class properties using the equal sign. This is still a proposal so it will not work out of the box using babel. What you need is a plugin.

npm install --save-dev @babel/plugin-proposal-class-properties

//.babelrc
{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

A cool feature of this proposal is that it creates bounded functions. So there is no need to use .bind in constructor anymore! You can read more about it here.

answered Jan 31, 2019 at 11:36

Alex Michailidis

4,1531 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack Babel Arrow Function Module Build Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related