ES6 syntax error with babel-loader (webpack)

Question

Trying to make a simple graph using storm-react-diagrams

Not Completely sure how to solve this.
Error:

ERROR in ./src/diagram.jsx
Module build failed: SyntaxError: Unexpected token, expected , (31:9)

  29 |   // link the ports
  30 |   let link1 = port1.link(port2);
> 31 |   (link1 as DefaultLinkModel).addLabel("Hello World!");
     |          ^
  32 | 
  33 |   //4) add the models to the root graph
  34 |   model.addAll(node1, node2, link1);

diagram.jsx is exactly the same as this

Am i missing some kind of fancy es6 syntax here or what?
This is what my webpack.config looks like.

Answer 1

The as keyword comes from TypeScript, not ES2015. It's used for casting variables from one type to another - that wouldn't make sense in plain JavaScript, which doesn't have compile-time types!

If you want to use TypeScript in your application, you'll need a TypeScript Webpack loader (such as ts-loader or awesome-typescript-loader), and to rename your file to a .tsx extension.

Alternatively, if you're not interested in using TypeScript, you should just be able to replace (link1 as DefaultLinkModel) with link1 and have things work as expected.