ReferenceError: self is not defined

[chea1tei]

When I try to import with the following lines as documented,

import { Chart } from "chart.js";
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";

Chart.register(ChartjsPluginStacked100);

The error keeps showing ReferenceError: self is not defined..

I cant seems to figure out what is the issue

I'm using version:-

"chart.js": "^4.2.0", "chartjs-plugin-stacked100": "^1.3.0", "react-chartjs-2": "^5.2.0",

[y-takey]

@chea1tei Are you trying to render on a server? If so, I think you need a canvas polyfill, etc. like this: https://github.com/shellyln/chart.js-node-ssr-example

[chea1tei]

@y-takey Yes I am..

after installing the red-agate-svg-canvas

version :- "red-agate-svg-canvas": "^0.5.0",

I imported the followings :-

 import {
    SvgCanvas,
    Rect2D,
    SvgCanvas2DGradient
} from 'red-agate-svg-canvas/modules';

import { Chart } from "chart.js";
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";

Chart.register(ChartjsPluginStacked100);

even with these import lines, I still get back the same error..

[y-takey]

@chea1tei Can you provide a repository where the problem can be reproduced?

[lekt9]

Also facing the same issue here on Nextjs

[y-takey]

@lewistham9x Thank you for the report :) Can you provide a repository where the problem can be reproduced?

[y-takey]

Hi @thiagonzalez , ~~I have released version 1.5.1 of chartjs-plugin-stacked100, which has been built to run in the Node.js environment as well. If you have some time, please try updating it and test it.~~

I had to revert the changes due to configuration issues.

[bklever]

+1 unable to use with Nextjs

[rayleighko]

In my case, the error occurred when I tried to use browser functionality on the server side (since I wasn't trying to use charts on the server side).

So I solved the problem by not server-side rendering the component that contained the charts I wanted to use.

This may not be your case, but I'm leaving a comment for others who have the same problem as me. :)

// Component containing a chart

import { Bar } from "react-chartjs-2"
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100"

Chart.register(ChartjsPluginStacked100)

export const MyChart = () => {
    return <Bar options={options} data={data} />
}
...

// Another component that wants to use the component (aka. chart-wrapper)

import dynamic from "next/dynamic"

const MyChart = dynamic(
  () => import("./MyChart"),
  { ssr: false },
)

const MyChartWrapper = () => {
    return <MyChart />
}