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

Question

我想在我的next应用程序中使用一个响应式饼图。为了简单起见，我认为chart.js是获得快速结果的最有效和最简单的方法。现在我被困了几天。GitHub repos和其他stackoverflow帖子涉及比我的版本更旧的版本。

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

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

在编辑器中打开项目并添加pieChart。将官方示例中的代码作为组件导入到项目中，例如components/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)

有可能有一个工作饼状图吗?在我的应用中，饼状图带有道具，能够很好地响应用户输入。由于某些原因，我无法部署它，因为构建不起作用。

我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问题。背景信息和解决方案将在下一篇文档中提供。

next 3 Docs

将导致问题的库添加到build.transpile解决了这个问题。

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
build: {
transpile: ['chart.js']
}
})

Answer 2

为我生成fine

Package.json

{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.4",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"vite-svg-loader": "^3.4.0",
"webpack": "^5.73.0"
},
"dependencies": {
"@pinia/nuxt": "^0.3.1",
"chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.1.0",
"vue-chart-3": "^3.1.8",
"vue-chartjs": "^4.1.1"
}
}

我的next .config.js文件

import { defineNuxtConfig } from 'nuxt'
import svgLoader from 'vite-svg-loader'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@/assets/styles.scss";
@import "@/assets/functions.scss";
@import "@/assets/variables.scss";
@import "@/assets/neumorphism.scss";
@import "@/assets/components.scss";
`,
},
},
},
plugins: [
svgLoader({})
],
},
typescript: {
shim: false
},
modules: [
'@pinia/nuxt',
],
build: {
transpile: ['chart.js']
}
})