How can resolve this error "Uncaught SyntaxError: Cannot use import statement outside a module" in Laravel 8 with Chart consoletvs/charts:7.*?

Question

I have followed all of the steps in [https://chartisan.dev/documentationip top1]. With CDN links everything works fine, I can load any chart.

<script src="https://unpkg.com/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>

But I won't be using the CDN links, so I removed those two lines above and installed the front-end adapter with npm install chart.js@chartisan/chartjs to be able to use chart without CDN , this is my code below

 <div id="chart" style="height: 300px;"></div>

<script>
    import { Chartisan, ChartisanHooks } from '@chartisan/chartjs'//This is the problem
    const chart = new Chartisan({
          el: '#chart',
          url: "@chart('sample_chart')",
          hooks: new ChartisanHooks()
          .beginAtZero()
          .colors()
          .datasets('doughnut')
          });
  </script>

when I run I have this error :

Uncaught SyntaxError: Cannot use import statement outside a module

score 0 · Answer 1 · answered Dec 10 '20 at 10:56

0

You need to import them in app.js not in views.

answered Dec 10 '20 at 10:56

Yamen Ashraf

2,637
2
20
26

I try your answer but still not work. I remove this : "import { Chartisan, ChartisanHooks } from '@chartisan/chartjs'" and I added this line in public/app.js I have this error : Uncaught ReferenceError: Chartisan is not defined at – Jon Dec 10 '20 at 11:04
Try to require it instead. like Window.Chart = require('@chartisan/chartjs'') – Yamen Ashraf Dec 10 '20 at 12:20
I have this error "Uncaught ReferenceError: require is not defined at" with Window.Chart = require('@chartisan/chartjs') – Jon Dec 10 '20 at 12:48

score 0 · Answer 2 · answered Jan 08 '23 at 00:45

You need to do following inside your app.js

import {Chartisan, ChartisanHooks} from '@chartisan/chartjs';
window.Chartisan= Chartisan;
window.ChartisanHooks= ChartisanHooks;

Then inside your .blade file you only need to directly use the Chartisan and ChartisanHooks like this

<div id="chart" style="height: 300px;"></div>

<script>
       const chart = new Chartisan({
          el: '#chart',
          url: "@chart('sample_chart')",
          hooks: new ChartisanHooks()
          .beginAtZero()
          .colors()
          .datasets('doughnut')
          });
  </script>

Make sure that you include app.js file inside your .blade file properly. And it should work.

How can resolve this error "Uncaught SyntaxError: Cannot use import statement outside a module" in Laravel 8 with Chart consoletvs/charts:7.*?

2 Answers2