使用Webpack Babel项目无法编译jqwidgets-framework / jqwidgets-react / react_jqxchart

Question

正在获取错误“无法编译”。需要使用哪个webpack加载程序来解决该问题？

ERROR in ./node_modules/jqwidgets-framework/jqwidgets-react/react_jqxchart.js 401:12
Module parse failed: Unexpected token (401:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
>             <div id={this.state.id}>{this.props.value}{this.props.children}</div>
|         )
|     };
 @ ./src/components/screens/Charts/barChart.js 13:22-83
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
i ｢wdm｣: Failed to compile

    import React from 'react';
    import JqxChart from 'jqwidgets-framework/jqwidgets-react/react_jqxchart';

    window.React = React;

    class App extends React.Component {
      render() {
        const $ = window.$;
        const data = [{
          Month: 'February', UAdded: '10', UConsumedPercent: '16.2', UConsumed: '20',
        },
        {
          Month: 'March', UAdded: '20', UConsumedPercent: '16.2', UConsumed: '15',
        },
        {
          Month: 'April', UAdded: '15', UConsumedPercent: '16.2', UConsumed: '20',
        },
        {
          Month: 'May', UAdded: '12', UConsumedPercent: '16.2', UConsumed: '5',
        },
        {
          Month: 'June', UAdded: '11', UConsumedPercent: '16.2', UConsumed: '10',
        },
        {
          Month: 'July', UAdded: '8', UConsumedPercent: '16.2', UConsumed: '4',
        }];
        const source = {
          localdata: data,
          datatype: 'json',
          datafields: [
            { name: 'Month' },
            { name: 'UAdded' },
            { name: 'UConsumedPercent' },
            { name: 'UConsumed' },
          ],
        };

        const dataAdapter = new window.jQuery.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: (xhr, status, error) => { alert(`Error loading "${source.url}" : ${error}`); } });
        const padding = {
          left: 5, top: 5, right: 5, bottom: 5,
        };
        const titlePadding = {
          left: 90, top: 0, right: 0, bottom: 10,
        };
        const xAxis = {
          dataField: 'Country',
          gridLines: { visible: true },
          valuesOnTicks: false,
        };
        const seriesGroups = [
          {
            type: 'column',
            valueAxis:
            {
              visible: true,
              // unitInterval: 5000,
              minValue: 0,
              maxValue: 40,
              unitInterval: 4,
              title: { text: 'GDP & Debt per Capita($)<br>' },
            },
            series: [
              { dataField: 'UAdded', displayText: 'GDP per Capita' },
              { dataField: 'UConsumed', displayText: 'Debt per Capita' },
            ],
          },
          {
            type: 'line',
            valueAxis:
            {
              visible: true,
              position: 'right',
              unitInterval: 10,
              title: { text: 'Debt (% of GDP)' },
              gridLines: { visible: false },
              labels: { horizontalAlignment: 'left' },
            },
            series: [
              { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' },
            ],
          },
        ];
        return (
          <JqxChart
            style={{ width: 850, height: 500 }}
            title="Economic comparison"
            description="GDP and Debt in 2010"
            showLegend
            enableAnimations
            padding={padding}
            titlePadding={titlePadding}
            source={dataAdapter}
            xAxis={xAxis}
            colorScheme="scheme01"
            seriesGroups={seriesGroups}
            columnSeriesOverlap={false}
          />
        );
      }
    }

    export default App;