未捕获的ReferenceError:使用react-chartjs.min.js未定义require

时间:2017-09-15 11:29:20

标签: reactjs webpack chart.js react-chartjs

我对react.js很新。请原谅我这个问题太傻了 我想建立一个折线图。我决定继续使用react.js,chart.js和react-chartjs.min.js。

我在我的cshtml中包含了react-chartjs.min的脚本,我也添加了jsx文件。

现在我面临一个错误,我不会在哪里出错。

  1. demo.jsx给出 - 未捕获的ReferenceError:未定义的需求

    index.cshtml

  2. <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(&#34; react-chartjs&#34;)。Line;

    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'
                })
    
        ]
    };
    

1 个答案:

答案 0 :(得分:0)

你必须按照react-chartjs

的例子中的说明导入Line

example code

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

此外,你必须使用bable来构建它。