未捕获的 ReferenceError：未使用 react-chartjs.min.js 定义要求

Posted 2023-03-23

【中文标题】未捕获的 ReferenceError：未使用 react-chartjs.min.js 定义要求

【英文标题】：Uncaught ReferenceError: require is not defined using react-chartjs.min.js

【发布时间】：2018-02-24 14:01:00

【问题描述】：

我对 react.js 很陌生。如果问题太愚蠢，请原谅我 我想建立一个折线图。我决定继续使用 react.js、chart.js 和 react-chartjs.min.js。

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

现在我面临一个错误，我不知道我哪里出错了。

demo.jsx 给出 - Uncaught ReferenceError: require is not defined

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").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'
            )

    ]
;

【问题讨论】：

有没有不使用 npm 命令安装 webpack 的方法？

【参考方案1】：

你必须像 react-chartjs 的例子中提到的那样导入 Line

example code

import Line from 'react-chartjs-2'; 

您还必须使用 bable 来构建它。

【讨论】：

我将使用 es5 而不是 es6。难道不能用es5和react-chartjs-2吗？