Uncaught ReferenceError: Chart is not defined

Question

I've installed chart.js using npm by : npm install chart.js --save-dev , in "resources/assets/js/bootstrap.js"
I refer to it by: require('chart.js');
Then in my console npm run dev and finally it's successfully compiled in "public/js/app.js" , however when I try to use it in my view as follow

<script src="/js/app.js"></script><script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
......... </script>

the browser returns

Uncaught ReferenceError: Chart is not defined.

How come it's declared in app.js and can't refer to it ?
Thanks in advance.

Answer 1

If you look in app.js, is it wrapped in a function? It sounds like it's not part of the global namespace, despite being present in app.js.

Answer 2

If you're using es6 you might need to change the way you require it.

from the docs: http://www.chartjs.org/docs/

// Using CommonJS
var Chart = require('chart.js')
var myChart = new Chart({...})

// ES6
import Chart from 'chart.js'
let myChart = new Chart({...})

// Using requirejs
require(['path/to/Chartjs'], function(Chart){
var myChart = new Chart({...})
})