Uncaught ReferenceError: require is not defined using react-chartjs.min.js

Question

I am very new to react.js. pardon me if the question is too silly i would want to build a line chart. i have decided to go ahead with react.js ,chart.js and react-chartjs.min.js.

I have included the script for react-chartjs.min in my cshtml, i have also added jsx file in the same.

Now im facing a error , i dont where i am going wrong.

demo.jsx gives - 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'
            })

    ]
};

is there a way to install webpack without using npm command? — Maddy
– Maddy, Commented Sep 18, 2017 at 13:07

js_248 · Accepted Answer · 2017-09-15 19:53:03Z

0

you have to import Line as mentioned in example of react-chartjs

example code

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

Also you have to use bable for building this.

answered Sep 15, 2017 at 19:53

js_248

2,1224 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maddy Over a year ago

i would be using es5 and not es6. Is it not possible to use es5 and use react-chartjs-2?

Collectives™ on Stack Overflow

Uncaught ReferenceError: require is not defined using react-chartjs.min.js

index.cshtml

demo.jsx

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.cshtml

demo.jsx

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related