You may need an appropriate loader to handle this file type.

[eaglepigjim]

Hi,

I'm using this starter kit and it is awesome, but I am having trouble when I add a new library:
"jqwidgets-framework": "4.6.0",

This library is great and I have used it before pre-React. I am following their demo on http://www.jqwidgets.com/jquery-widgets-documentation/documentation/React/React.htm

import React from "react";
import JqxBarGauge from "jqwidgets-framework/jqwidgets-react/react_jqxbargauge";

class Grid extends React.Component {
render () {
return (
<JqxBarGauge width={600} height={600} colorScheme={"scheme02"} max={150}
values={[102, 115, 130, 137]} />
);
}
}

export default Grid;

But when I run webkit I get the following problem:

ERROR in ../~/jqwidgets-framework/jqwidgets-react/react_jqxbargauge.js
Module parse failed: C:\Code\Projects\Test\aspnet-starter-kit-vs-2015-master\node_modules\jqwidgets-framework\jqwidgets-react\react_jqxbargauge.js Unexpected token (235:6)
You may need an appropriate loader to handle this file type.
| let id = 'jqxBarGauge' + this.generateID() + this.generateID();
| this.componentSelector = id; return (
|

{this.value ? null : this.props.value}{this.props.children}

| )
| }

I have spent hours trying to figure this out, would anyone have an idea?

Thanks

[JakeLokkesmoe]

In the webpack.config.js, the babel loader is only being used for files from the ./client folder, not the ./node_modules folder.

But your library appears to be using es6, so you'll have to tell webpack to use the babel loader to load this library instead of the default js loader. You can do this by adding it to the include for the babel loader like so:

  ...
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, './client'),
          path.resolve(__dirname, './node_modules/jqwidgets-framework/'
        ],
        loader: `babel-loader?${JSON.stringify(babelConfig)}`,
      },
      ...
    ],
    ...