Chart.js: Error: Module name "core/core.js" has not been loaded yet for context

Created on 10 Jul 2016 · 25Comments · Source: chartjs/Chart.js

<!doctype html>

<html lang="de">
<head>
  <meta charset="utf-8">
<script src="require.js"></script>

</head>

<body>
<canvas id="myChart" width="400" height="400"></canvas>

<script>
var ctx = document.getElementById("myChart");
require(['Chart.js/src/chart.js'], function(Chart){
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
})
</script>

</body>
</html>

Error: Module name "core/core.js" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

...=c[b]});return c}function F(b,c,d,g){c=Error(c+"md5-7e2fd7b3f6778288f075394475f5d5dfnhttp://requirejs.org/docs/erro...

require.js (Zeile 7, Spalte 290)
TypeError: Chart is not a constructor

var myChart = new Chart(ctx, {

index.html (Zeile 16, Spalte 15)

So ... without require.js I get an error and with require.js I get an error ... Now what?

support

Source

DestructionOfPlanetJupiter

All 25 comments

@DestructionOfPlanetJupiter to load with require you should use the built version. src/core/chart.js is the entry point for webpack builds

etimberg on 10 Jul 2016

src/core/chart.js does not exist

download version of today ...

edit:
It is not even in your repo directory ..

DestructionOfPlanetJupiter on 10 Jul 2016

That was a typo in my comment. But your script is loading from the src directory which is incorrect. You should load the built version.

etimberg on 10 Jul 2016

We have restructured the repository so that there is no longer a dist folder. Please access Chart.js builds with a CDN or by downloading from the releases page.

panzarino on 10 Jul 2016

👎4

That was a typo in my comment. But your script is loading from the src directory which is incorrect.
You should load the built version.

What?

DestructionOfPlanetJupiter on 10 Jul 2016

We have restructured the repository so that there is no longer a dist folder.
Please access Chart.js builds with a CDN or by downloading from the releases page.

Seriously ... seriously ...

I cannot believe how much time I have wasted because of this.

DestructionOfPlanetJupiter on 10 Jul 2016

@DestructionOfPlanetJupiter

require(['Chart.js/src/chart.js'], function(Chart){ is loading https://github.com/chartjs/Chart.js/blob/master/src/chart.js

You should be loading the file from the dist directory that is generated by running gulp build or included when installing from NPM. The built file looks like: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js

etimberg on 10 Jul 2016

Closing because an acceptable answer has been provided and the problem appears to be solved.

panzarino on 11 Jul 2016

👎2

Really ... It does not run on my web server ... so, nothing solved as of now.

DestructionOfPlanetJupiter on 12 Jul 2016

👍1

Can you please post the code that is giving you an error.

panzarino on 12 Jul 2016

Really, if to set here require(['../dist/Chart.js'], function(Chart){ path to Chart.js from dist folder all works fine

semvolo on 29 Jul 2016

@DestructionOfPlanetJupiter

require(['Chart.js/src/chart.js'], function(Chart){ is loading https://github.com/chartjs/Chart.js/blob/master/src/chart.js

You should be loading the file from the dist directory that is generated by running gulp build or >included when installing from NPM. The built file looks like: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js

I finally have some time to deal with this javascript nuisance.

There is no gulp build. Why do I need countless other stuff for something at trifle as a javascript library? What is git there for? Composer makes at least sense, but adding countless other stuff just for a small javascript thing sounds to me like unnecessary overhead. KISS ... and do not install 3 million additional libraries.

zachpanz88 commented on 12 Jul

Can you please post the code that is giving you an error.

Take the code from the examples you have my current test code ...

semvolo commented on 29 Jul • edited

Really, if to set here require(['../dist/Chart.js'], function(Chart){ path to Chart.js from dist folder all >works fine

Yeah ... doesn't

DestructionOfPlanetJupiter on 28 Aug 2016

switched to c3 ... that actually works ... unlike this thing here.

DestructionOfPlanetJupiter on 28 Aug 2016

Guys, it's May 2017 and you still haven't fixed this issue. This is the first problem after downloading your library. Very unprofessional!

@DestructionOfPlanetJupiter thanks for idea about c3. Definetly switching..

MaxBondarchuk on 1 May 2017

@MaxBondarchuk can you elaborate and/or share a test case of the issue which is still not fixed? we brought back dist files in tags and releases since 2.3.0, Sept. 2016, so loading dist/Chart.min.js with RequireJS is supposed to work without the need to build anything on your side.

simonbrunel on 1 May 2017

👎1

Same example, new version of library ... same result ... does not work.

Error: Module name "core/core.js" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded require.js:5:1067
TypeError: Chart is not a constructor test.html:16:15

DestructionOfPlanetJupiter on 4 May 2017

It seems you can not load CommonJS module as is.

http://www.requirejs.org/docs/commonjs.html#intro

Though, if you require dist/Chart.min.js as described in my previous comment, it should work.

simonbrunel on 4 May 2017

There is no dist folder ...

so we are back to the old issue ... which is still not fixed.

DestructionOfPlanetJupiter on 4 May 2017

If you don't know, code here won't work
https://github.com/chartjs/Chart.js/blob/master/src/chart.js
require is not a synchronous operation. If you don't believe me I can take screenshots

By the way I downloaded c3 and it worked in several minutes.

MaxBondarchuk on 4 May 2017

@DestructionOfPlanetJupiter Well, I guess you didn't read my first comment before adding your 👎, because if you follow the links I posted (the text in blue), you will realize that there is actually a dist folder:

https://github.com/chartjs/Chart.js/tree/v2.5.0/dist

OR following this link: https://github.com/chartjs/Chart.js/releases/tag/v2.5.0 and scroll down:

and finally when using the proper file (and not the CommonJS one), require([/* path to Chart.min.js */]) works as expected (e.g. require(['chartjs/dist/Chart.min.js'], function(Chart){) - check the following ZIP file containing your own example with the correct require: chartjs-requirejs.zip

simonbrunel on 4 May 2017

Ok, you seduced me to shots...

MaxBondarchuk on 4 May 2017

git checkout tags/v2.5.0
yeah ... that makes sense. Especially as it is not on master.

DestructionOfPlanetJupiter on 4 May 2017

Creating project

Installing your RELEASE!

JavaScript code
(copied from this tutorial http://www.chartjs.org/docs/#getting-started-creating-a-chart)
https://github.com/MaxBondarchuk/Chart-JS-Test/blob/master/Chart%20JS%20Test/wwwroot/js/site.js

Main window

Your error

HTML
Layout:
https://github.com/MaxBondarchuk/Chart-JS-Test/blob/master/Chart%20JS%20Test/Views/Shared/_Layout.cshtml
Main page with canvas for chart:
https://github.com/MaxBondarchuk/Chart-JS-Test/blob/master/Chart%20JS%20Test/Views/Home/Index.cshtml

Completed project:
https://github.com/MaxBondarchuk/Chart-JS-Test

FYI
http://requirejs.org/docs/errors.html#notloaded

Feel free to ask questions

MaxBondarchuk on 5 May 2017

With Chart.min.js

https://github.com/MaxBondarchuk/Chart-JS-Test/commit/ddc675e02178ad94ba242fc48f7aaa06cb84574a

MaxBondarchuk on 5 May 2017

@MaxBondarchuk I don't think that require(['Chart.min.js'] is the correct path to Chart.min.js, right? Maybe require(['/lib/chart.js/Chart.min.js'] or whatever that points to the file on your server.

However, I'm not sure why you need to use RequireJS to load Chart.js because apparently you already load it via a <script> element: _Layout.cshtml#L56 & _Layout.cshtml#L74. So why loading it a second time here: site.js#L4? If you still want to use RequireJS, then I guess you should require the correct file path and remove <script> tags.

I can't build your project since I only have VS2015 installed. If you download chartjs-requirejs.zip from my previous message, you can verify that it works with RequireJS and may want to investigate differences with your environment (unzip and open index.html).

simonbrunel on 5 May 2017

Was this page helpful?

0 / 5 - 0 ratings