未接收参考:未使用React-chartjs.s.min.js定义要求

Question

我对react.js非常新。赦免我，如果问题太傻了我想构建一个线条图。我决定继续进行react.js，Chart.js和react-chartjs.min.js。

我在我的cshtml中包含了react-chartjs.s.min的脚本，我还将JSX文件添加在一起。

现在我面临错误，我不在哪里出错。

1. demo.jsx给出 - 未定义的参考文献

   index.cshtml

<div id="content" class="myDiv" ></div>
    <script src="~/Scripts/react.js"></script>
    <script src="~/Scripts/react-dom.js"></script>
    <script src="~/Scripts/remarkable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react-chartjs/0.8.0/react-chartjs.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.js"></script>
 <script src="@Url.Content("~/Scripts/Custom/demo.jsx")"></script>
</div>

demo.jsx

var linechart = require（" react-chartjs"）。线;

webpack.config.js

module.exports = {
    entry: "./Scripts/Custom/OrderReleaseItems.jsx",
    output: {
        filename: "./dist/bundle.js"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 15878
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: "babel-loader"
            }
        ]
    }, plugins: [
            new webpack.ProvidePlugin({
                'React': 'react',
                '$': 'jquery',
                '_': 'lodash',
                'ReactDOM': 'react-dom',
                'cssModule': 'react-css-modules',
                'Promise': 'bluebird'
            })
    ]
};

Answer 1

您必须如React-chartjs

中提到的线导入行

示例代码

import {Line} from 'react-chartjs-2'; 

您还必须使用Bable来构建此功能。