Nuxt3 rc.4集成vue-chartjs生产构建报错如何实现响应式饼图

在Nuxt 3应用中集成chart.js+vue-chartjs实现响应式饼图时，开发环境运行完全正常，但生产构建后启动预览服务会抛出CommonJS模块命名导出相关错误，无法正常部署。现有公开解决方案均适配更低版本，无法解决当前版本下的问题。

复现步骤 #

• 初始化项目并安装依赖

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

• 新增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引入组件：

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

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

• 执行运行命令

# 开发环境运行正常
yarn dev -o

# 生产构建后预览报错
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"
  }
}

需求目标 #

实现可正常在生产环境运行的响应式饼图，支持通过props传入数据、响应用户输入，解决生产构建报错无法部署的问题。

报错核心原因有两点：一是Nuxt 3服务端渲染阶段将chart.js识别为CommonJS模块，不支持直接使用命名导出语法；二是chart.js是纯前端依赖，本身依赖浏览器DOM API，不需要在服务端执行。按以下操作即可修复：

• 方案一（最简便，无需修改业务代码）：将饼图组件重命名为PieChart.client.ts，Nuxt会自动将带.client后缀的组件标记为仅客户端渲染，不会在服务端打包阶段引入chart.js相关代码，从根源上规避CommonJS导入问题，组件原有props传参、响应式更新逻辑完全不受影响。
• 方案二（不想修改文件名时使用）：
  1. 在页面引入组件时，用Nuxt内置的<ClientOnly>组件包裹饼图组件，阻止服务端渲染该组件：

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

  2. 调整组件内chart.js的导入写法，适配CommonJS模块解析规则：

  // 替换原有的命名导入写法
  import pkg from 'chart.js'
  const { Chart: ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } = pkg
  

修改完成后清空缓存重新执行构建命令即可正常部署。

内容的提问来源于stack exchange，提问作者inTheFlow