Using vue-chartjs (4.1.1) in Nuxt (3.0.0-rc.4) doesn't build | How can I use a simple pie chart in a nuxt project?

Question

I want to use a reactive pie chart for my Nuxt app. For simplicity I thought chart.js is the most productive and easiest way to get fast results. Now I am stuck for a couple of days. GitHub repos and other stackoverflow posts relate to older releases than mine.

This is a minimal version of my app to reproduce the error I am trying to fix.

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

Open the project in an editor and add the pieChart.ts code from the official examples as a component into the project, e.g. 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
      })
  }
})

Use the PieChart component in app.vue.

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

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

Run the code.

# dev build works
yarn dev -o

# production build doesn't work
yarn build
yarn preview

As commented, the development build runs perfectly fine. But as soon as I try to test the production build, the terminal repeatedly throws me that error:

[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)

Is it possible to have a working pie chart? In my app the pie chart is fed with props and reacts nicely to user inputs. I just can't deploy it for some reason, since the build doesn't work.

My 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

That's a known ESM issue. Background information and a solution are provided in the nuxt docs.

Nuxt 3 Docs

Adding the problem causing library to build.transpile solves the issue.

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

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