Electron+nuxt+amCharts 4: Unexpected token export

Question

I want to code a desktop application using Electron, nuxt.js and am4charts. When importing the am4charts core with

import * as am4core from '@amcharts/amcharts4/core'

the app returns an error:

export { System, system } from "./.internal/core/System";
^^^^^^

SyntaxError: Unexpected token export

My setup:

• Electron-nuxt boilerplate (https://github.com/michalzaq12/electron-nuxt)
• "@amcharts/amcharts4": "^4.7.1"

I already tried to transpile amCharts in nuxt.config.js using

  build: {
    transpile: [
      '@amcharts/amcharts4'
    ],
    vendor: ['v-tooltip']
  }

but without success. How can I fix this issue?

Answer 1

I found it could be known issue between nuxt.js and amcharts.js and it has a solution as follows:

create a file plugins/amcharts.js

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_dark from "@amcharts/amcharts4/themes/dark";

import Vue from "vue";

Vue.prototype.$am4core = () => {
  return {
    am4core,
    am4charts,
    am4themes_animated,
    am4themes_dark
  }
}

then add to nuxt.config.js

plugins: [
    {
      src: '~/plugins/amCharts.js',
      ssr: false
    }
  ],

in components file

mounted() {
     let {am4core, am4charts, am4themes_animated, am4themes_dark} = this.$am4core();
 }

Solution is found on Github: https://github.com/nuxt/nuxt.js/issues/3336