vue.js - 在 Nuxt (3.0.0-rc.4) 中使用 vue-chartjs (4.1.1) 无法构建 |如何在 nuxt 项目中使用简单的饼图？

Question

我想为我的 Nuxt 应用程序使用响应式(Reactive)饼图。为简单起见，我认为 chart.js 是获得快速结果的最高效和最简单的方法。现在我被困了几天。 GitHub 存储库和其他 stackoverflow 帖子与比我的版本更旧的版本相关。

这是我的应用程序的最小版本，用于重现我尝试修复的错误。

# installation
npx nuxi init repro-chartjs
cd repro-chartjs
yarn add vue-chartjs chart.js
yarn install

在编辑器中打开项目并添加来自官方examples的pieChart.ts代码作为项目的一个组成部分，例如组件/pieChart.ts.

import { defineComponent, h, PropType } from 'vue'

import { Pie } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale,
  Plugin
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default defineComponent({
  name: 'PieChart',
  components: {
    Pie
  },
  props: {
    chartId: {
      type: String,
      default: 'pie-chart'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object as PropType<Partial<CSSStyleDeclaration>>,
      default: () => {}
    },
    plugins: {
      type: Array as PropType<Plugin<'pie'>[]>,
      default: () => []
    }
  },
  setup(props) {
    const chartData = {
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
          backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
          data: [40, 20, 80, 10]
        }
      ]
    }

    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false
    }

    return () =>
      h(Pie, {
        chartData,
        chartOptions,
        chartId: props.chartId,
        width: props.width,
        height: props.height,
        cssClasses: props.cssClasses,
        styles: props.styles,
        plugins: props.plugins
      })
  }
})

在 app.vue 中使用 PieChart 组件。

<template>
  <div>
    <PieChart />
  </div>
</template>

<script setup>
import PieChart from './components/pieChart'
</script>

运行代码。

# dev build works
yarn dev -o

# production build doesn't work
yarn build
yarn preview

如评论所述，开发构建运行得非常好。但是，一旦我尝试测试生产版本，终端就会反复向我抛出该错误:

[nuxt] [request error] Named export 'ArcElement' not found. The requested module 'chart.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'chart.js';
const { Chart, Title: Title$1, Tooltip, Legend, ArcElement, CategoryScale } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async /C:/Users/panda/.00_Web-Dev/00%20Portfolio/repro-chartjs/.output/server/chunks/renderer.mjs:11158:24
  at async /C:/Users/panda/.00_Web-Dev/00%20Portfolio/repro-chartjs/.output/server/chunks/renderer.mjs:11213:64
  at async /C:/Users/panda/.00_Web-Dev/00%20Portfolio/repro-chartjs/.output/server/node_modules/h3/dist/index.mjs:420:19

  at async nodeHandler (/C:/Users/panda/.00_Web-Dev/00%20Portfolio/repro-chartjs/.output/server/node_modules/h3/dist/index.mjs:370:7)
  at async ufetch (/C:/Users/panda/.00_Web-Dev/00%20Portfolio/repro-chartjs/.output/server/node_modules/unenv/runtime/fetch/index.mjs:9:17)
  at async $fetchRaw2 (/C:/Users/panda/.00_Web-Dev/00%20Portfolio/repro-chartjs/.output/server/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)

是否可以制作饼图？在我的应用程序中，饼图由 props 提供，并对用户输入做出很好的 react 。我只是出于某种原因无法部署它，因为构建不起作用。

我的 package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "chart.js": "^3.8.0",
    "vue-chartjs": "^4.1.1"
  }
}

Answer 1

这是一个已知的 ESM 问题。 nuxt 文档中提供了背景信息和解决方案。

Nuxt 3 Docs

将导致问题的库添加到 build.transpile 可以解决问题。

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  build: {
    transpile: ['chart.js']
  }
})