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/[email protected]/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

Answer 1

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

Answer 2

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.