Can't set up amcharts5 as a plugin in nuxt 3

Question

I'm currently trying to use amcharts 5 in a Nuxt3 app, and had a couple of graphs working fine. However at some point amcharts has randomly stopped working and I get the following error:

[h3] [unhandled] H3Error: am5 is not defined
    at createError (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:196:15)
    at Server.nodeHandler (file:///home/johnr/Code/UrbanTide/socialconnect_ukpn/node_modules/h3/dist/index.mjs:386:21) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

I tried using amcharts5 according to the docs by importing it and using it in lifecycle hooks.

And initially had an issue related to ESM modules which was resolved by adding "type" : "module" to package.json. After that I made a couple of graphs and they worked fine. However shortly after writing a third graph I changed the ssr setting in nuxt.config.js to false and shortly after got the above error.

I've tried adding amcharts to the transpile array in the nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  publicRuntimeConfig: {
    VUE_APP_AUTH_COOKIE: process.env.VUE_APP_AUTH_COOKIE,
    VUE_APP_ENV: process.env.VUE_APP_ENV,
    VUE_APP_SESSION_HASH: process.env.VUE_APP_SESSION_HASH,
    VUE_APP_USMART_ORIGIN: process.env.VUE_APP_USMART_ORIGIN,
    MAP_BOX_ACCESS_TOKEN: process.env.MAP_BOX_ACCESS_TOKEN
  },
  css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
  build: {
    transpile: ["vuetify", "@amcharts/amcharts5"]
  },
  vite: {
    define: {
      "process.env.DEBUG": false
    }
  },
  buildModules: [
    // ...
    '@pinia/nuxt',
  ],
})

but didn't have any joy.

I have also tried setting up a plugin:

plugins/amCharts.client.ts

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import * as am5radar from "@amcharts/amcharts5/radar";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export default defineNuxtPlugin(() => {
  return {
    provide: {
      am5: am5,
      am5xy: am5xy,
      am5radar: am5radar,
      am5themes_Animated: am5themes_Animated,
    }
  }
})

and I'm retrieving it in the component like so:

const { $am5, $am5radar, $am5themes_Animated, $am5xy } = useNuxtApp()

Your package maybe doesn't support SSR and is client side only? — kissu, Aug 11 '22 at 14:28
Probably a good bet. I rewrote my plugin as .client.ts buts its not resolved the problem. — John, Aug 11 '22 at 14:35
So I'm an idiot. I moved a piece of the code from the component to assets because I thought it was just a static array and didn't notice it was using the am5 instance. — John, Aug 11 '22 at 15:11

score 0 · Answer 1 · answered Aug 11 '22 at 15:14

0

The issue was a solved by removing a remaining piece of code calling the am5 instance as explained here.
Happens to anybody!

answered Aug 11 '22 at 15:14

kissu

40,416
14
65
133

Can't set up amcharts5 as a plugin in nuxt 3

1 Answers1