Symfony 4 - 使用 webpack encore 导入 ChartJS？

Question

I downloaded the ChartJS package on Symfony, and I would like to be able to use it with webpack-encore

In my Twig template, I can use Chart with :

new Chart(document.getElementById("myChart"), { ..... }

It works with CDN, but now I would like to use it with webpack-encore.

So in my app.js I tried :

//1er essai
import Chart from "chart.js";
global.Chart = Chart

//2eme essai
const Chart = require("chart.js");
global.Chart = Chart;

But neither works. Each time in the browser I get the following error :

Uncaught ReferenceError: Chart is not defined

Can someone help me please ?

Answer 1

When using webpack encore I find it easier to install different modules via npm. In the documentation it says that bower and npm are recommended. So you basically write this

npm install chart.js --save

And for usage you simply import it.

Answer 2

If you use Yarn (recommended by Webpack Encore), just type :

yarn add chart.js 

Then in your js file :

import Chart from 'chart.js';

new Chart($("#myElement"), {
    ...
});