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 piled 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 e it's declared in app.js and can't refer to it ?
Thanks in advance.

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 piled 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 e it's declared in app.js and can't refer to it ?
Thanks in advance.

• javascript
• php
• laravel
• npm
• chart.js

• Maybe you're using strict "use strict" mode? – DevK Commented Mar 29, 2017 at 15:26

2 Answers 2

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

from the docs: http://www.chartjs/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({...})
})

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.