Static GitHub Issues

[3336] [next] Nuxt with AmCharts 4

prev: How to minify external css file - nuxt static
next: Catch error in fetch/asyncData methods for error reporting with Vue.config.errorHandler dont work
  1. Install AmCharts
npm install @amcharts/amcharts4
  1. Create component
<template>
    <div class="d-flex">
        <div id="interval-chart"></div>
    </div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

export default {
  created() {
// Create chart instance
let chart = am4core.create("interval-chart", am4charts.PieChart);

// Create pie series
let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();
}

Expect

Render the graph.

Actually

✖ error /.../node_modules/@amcharts/amcharts4/core.js:8
  export { System, getSystem } from "./.internal/core/System";
  ^^^^^^
  
  SyntaxError: Unexpected token export
  at new Script (vm.js:74:7)
  at createScript (vm.js:246:10)

Comment

I'm using nuxt-edge: ^2.0.0-25429981.9298177. Everything is working, except this.

I thought that export {xzy} from 'z is ES2015 syntax, thus no problem with that.

Thank you gues.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c7071">#c7071</a>)</em></sub></div>