不能在nuxt 3中将amcharts5设置为插件

Question

目前，我正试图在Nuxt3应用程序中使用app 5，并且有几个图表可以正常工作。但是，在某一点上，at图已经随机停止工作，我得到了以下错误：

[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'
}

我尝试根据文档使用amcharts5，方法是导入它并在生命周期挂钩中使用它。

并且最初有一个与ESM模块相关的问题，通过向"type" : "module"添加package.json来解决这个问题。在那之后，我制作了几张图表，它们工作得很好。然而，在编写了第三个图后不久，我将nuxt.config.js中的nuxt.config.js设置更改为false，并在得到上述错误后不久。

我试着在nuxt.config.ts中的transpile数组中添加array

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',
  ],
})

但是没有joy。

我也尝试过安装一个插件：

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,
    }
  }
})

我在组件中检索，如下所示：

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

Answer 1

通过删除将am5实例调用为explained here的剩余代码，该问题得到了解决。

发生在任何人身上！