如何在 Laravel 8 中使用 Chart consoletvs/charts:7.* 解决此错误“Uncaught SyntaxError: Cannot use import statement outside a module”？答案

【问题标题】：How can resolve this error "Uncaught SyntaxError: Cannot use import statement outside a module" in Laravel 8 with Chart consoletvs/charts:7.*?如何在 Laravel 8 中使用 Chart consoletvs/charts:7.* 解决此错误“Uncaught SyntaxError: Cannot use import statement outside a module”？
【发布时间】：2021-03-21 19:07:01
【问题描述】：

我已遵循 [https://chartisan.dev/documentationip top1] 中的所有步骤。使用 CDN 链接一切正常，我可以加载任何图表。

<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>

但是我不会使用 CDN 链接，所以我删除了上面的那两行并使用 npm install chart.js@chartisan/chartjs 安装了前端适配器以便能够使用没有 CDN 的图表，这是我下面的代码

 <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>

当我运行时出现此错误：

Uncaught SyntaxError: Cannot use import statement outside a module

【问题讨论】：

标签： javascript laravel laravel-blade laravel-testing laravel-charts

【解决方案1】：

您需要将它们导入app.js 而不是视图中。

【讨论】：

我尝试了您的答案，但仍然无法正常工作。我删除了这个：“import { Chartisan, ChartisanHooks } from '@chartisan/chartjs'”并在 public/app.js 中添加了这一行我有这个错误：未捕获的 ReferenceError：Chartisan 未定义于
尝试要求它。像 Window.Chart = require('@chartisan/chartjs'')
我有这个错误“Uncaught ReferenceError: require is not defined at” with Window.Chart = require('@chartisan/chartjs')