Webpack Sytax Error Unexpected "::" from React code

Question

I am trying to integrate this react swipe module on github. Everything has been going well until I began integrating refs into my code. I am trying to call a react function from an onClick. Here is the code snippet I am working with:

class Page extends Component {
    next() {
        this.refs.reactSwipe.next();
    }

    prev() {
        this.refs.reactSwipe.prev();
    }

    render() {
        return (
            <div className="center">
                <h1>ReactSwipe.js</h1>
                <h2>Open this page from a mobile device (real or emulated).</h2>
                <h2>You can pass <a href="https://github.com/voronianski/swipe-js-iso#config-options">Swipe.js options</a> as query params.</h2>

                <ReactSwipe ref="reactSwipe" className="mySwipe" swipeOptions={swipeOptions}>
                    {paneNodes}
                </ReactSwipe>

                <div>
                    <button type="button" onClick={::this.prev}>Prev</button>
                    <button type="button" onClick={::this.next}>Next</button>
                </div>
            </div>
        );
    }
}

The problem is that web pack is throwing a Module build failed: SyntaxError: Unexpected token on the : from the line:

<button type="button" onClick={::this.prev}>Prev</button>

What setting do I need to add to the webpack settings to allow for this ::? Or how can I go about calling a react function from the html onClick without the :: function binding?

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I figured it out after wandering across this blog post. The :: is a ES7 proposed shortcut, and babel needs to be told to use the proposed parts of ES7.

So I installed the stage 0 preset from babel:

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

Then I updated my web-pack to recognize this:

module: {
  loaders: [
    {
      loader: "babel-loader",

      // Skip any files outside of your project's `src` directory
      include: [
        path.resolve(__dirname, "src"),
      ],

      // Only run `.js` and `.jsx` files through Babel
      test: /\.jsx?$/,

      // Options to configure babel with
      query: {
        presets: ['stage-0', 'react'],
      }
    },
  ]
}

The key part of this was the line:

presets: ['stage-0', 'react']

Webpack Sytax Error Unexpected "::" from React code

1 Answers1