esm support and nuxt3 says there is a fix needed for esm?

[simllll]

Expected behavior

Right now nuxt build fails iwth

[nuxt] [request error] Named export 'BarElement' 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';

accroding to the docs of nuxt: https://v3.nuxtjs.org/guide/going-further/esm/#troubleshooting-esm-issues

this is a library issue and can be fixed by: https://v3.nuxtjs.org/guide/going-further/esm/#library-author-guide

what's your point of view to that?

Current behavior

not possible to use with nuxt3 / esbuild.

Reproducible sample

no-example

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

3.9.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

import Chart from 'chart.js'; is the wrong way of importing.

If you want to do it like that you need to do it like so: import Chart from 'chart.js/auto';

Or if you want to import only what you need to need to do it like so:

import {Chart, ArcElement, DoughnutController} from 'chart.js';

Chart.register(ArcElement, DoughnutController);

[zumm]

import Chart from 'chart.js'; is the wrong way of importing.

If you want to do it like that you need to do it like so: import Chart from 'chart.js/auto';

Or if you want to import only what you need to need to do it like so:

import {Chart, ArcElement, DoughnutController} from 'chart.js';

Chart.register(ArcElement, DoughnutController);

It doesn't work. See example.

Cannot read properties of undefined (reading 'register')

[LeeLenaleee]

I don't really know what is going on here, since it seems that chart is undefined at build but in the browser it is fine, so you can wrap your code in an if statement to see if it is defined, then it does seem to work.

<template>
  <canvas id="ff"></canvas>
</template>

<script setup lang="ts">
import { Chart, registerables } from "chart.js";

if (Chart) {
  Chart.register(...registerables);
  new Chart("ff", {
    type: "doughnut",
    data: {
      labels: ["chart", "js"],
      datasets: [
        {
          data: [2, 5],
        },
      ],
    },
  });
}
</script>

https://codesandbox.io/s/nuxt-chartjs-issue-forked-b2rd9o?file=/pages/index.vue:0-357

[zumm]

@LeeLenaleee It works only in dev mode. After nuxt build and nuxt start it throws error like one mentioned above by @simllll.

Example here.

Named export 'Chart' 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, registerables } = pkg;

[LeeLenaleee]

Might be fixed in V4 since we changed package.json and builds, can you try to specify the chart.js dependency like this: "chart.js": "github:chartjs/Chart.js" in your package.json and see what happens?

Tried doing it in codesandbox but seems like they don't like it since vue couldn't resolve its routes anymore.

[zumm]

This way doesn't work at all. I think it because there is no dist directory.

ERROR Failed to resolve entry for package "chart.js". The package may have incorrect main/module/exports specified in its package.json.

[kurkle]

We don't have the dist files on github, that's why it does not work.

[zumm]

Could you publish new version (without latest tag on npm)?

[mykkode]

Using the following libraries: "vue-chartjs": "^4.1.1", "chart.js": "^3.9.1"

and the following import statement

import { Line } from 'vue-chartjs' import { Chart, LineElement, PointElement, CategoryScale } from 'chart.js/dist/chart.mjs'

In nuxt 3 I can use chart.js in both dev mode and build+preview mode.

[dryan]

import { Chart, LineElement, PointElement, CategoryScale } from 'chart.js/dist/chart.mjs'

this change fixed the issue for me

[jdhaines]

Same as above. I was using chart.js in a Vuepress site. It works as written in vue-chartjs for the dev command, but it would fail on build. Using the /dist/chart.mjs now allows it to work both ways. Thanks for this tip! I'd recommend adding it to the docs if this is the intended method of using the package.

[dargmuesli]

Tried using v4 to solve the error, but v4 yields a

[nuxt] [request error] [unhandled] [500] No "exports" main defined in /mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.output/server/node_modules/chart.js/package.json
  at new NodeError (node:internal/errors:387:5)  
  at throwExportsNotFound (node:internal/modules/esm/resolve:439:9)  
  at packageExportsResolve (node:internal/modules/esm/resolve:663:7)  
  at resolveExports (node:internal/modules/cjs/loader:493:36)  
  at Module._findPath (node:internal/modules/cjs/loader:533:31)  
  at Module._resolveFilename (node:internal/modules/cjs/loader:942:27)  
  at Module._load (node:internal/modules/cjs/loader:804:27)  
  at Module.require (node:internal/modules/cjs/loader:1022:19)  
  at require (node:internal/modules/cjs/helpers:102:18)  
  at Object.<anonymous> (./.output/server/node_modules/vue-chartjs/dist/index.cjs:5:16)

I think that's because vue-chartjs is a CommonJS module and chart.js v4 does not provide a CommonJS export in the dist directory, which could then be linked in the exports/./require package.json proprty.

Is support for CommonJS (too) planned for v4?

[LeeLenaleee]

Issue seems like it is fixed in V4. When I install the alpha of Chart.js yarn add chart.js@next it shows the chart after running yarn build and yarn start.

@zumm can you try to check if it also works for you since my experience with nuxt is next to 0

Project I tested it in: https://github.com/LeeLenaleee/nuxt-chartjs-import-bug

[dargmuesli]

Interesting. Indeed it was a vue-chartjs issue for me. I've raised a PR to fix it: https://github.com/apertureless/vue-chartjs/pull/934

[dargmuesli]

Well, vue-chartjs also needs to wait for chart.js 4 to use the exports syntax. Looking forward to v4! :)

[etimberg]

Closing this as resolved in v4