Server Error when using annotation plugin with Chart.js 4.0.1 in NextJS app

Hey guys,

First of all, thanks for making this super helpful library!

I am currently working on a NextJS and have implemented ChartJS v4.0.1. All works well, but when I want to install the annotation plugin and follow the steps of https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html I get the following error:

My React component is: (only relevant is shown)

import {useEffect, useState} from "react";
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js';
import Annotation from 'chartjs-plugin-annotation';
import {Bar} from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    Annotation,
);

.........

Do you guys have any idea how to solve this? Is it an issue because of ChartJS v4?

Thanks a lot!

Cheers, Ferre

[fdev]

I’ve been using the changes from the PR of @stockiNail with success using the following patch file for patch-package:

diff --git a/node_modules/chartjs-plugin-annotation/package.json b/node_modules/chartjs-plugin-annotation/package.json
index f7b8c12..45e3d9d 100644
--- a/node_modules/chartjs-plugin-annotation/package.json
+++ b/node_modules/chartjs-plugin-annotation/package.json
@@ -5,8 +5,15 @@
   "version": "2.1.0",
   "author": "Evert Timberg <[e-mail]>",
   "license": "MIT",
-  "main": "dist/chartjs-plugin-annotation.js",
-  "module": "dist/chartjs-plugin-annotation.esm.js",
+  "type": "module",
+  "main": "dist/chartjs-plugin-annotation.esm.js",
+  "jsdelivr": "dist/chartjs-plugin-annotation.min.js",
+  "unpkg": "dist/chartjs-plugin-annotation.min.js",
+  "exports": {
+    "types": "./types/index.d.ts",
+    "import": "./dist/chartjs-plugin-annotation.esm.js",
+    "require": "./dist/chartjs-plugin-annotation.min.js"
+  },
   "types": "types/index.d.ts",
   "repository": {
     "type": "git",

Don’t forget to remove the .next folder before running npm run dev, or it will use a cached unpatched version of chartjs-plugin-annotation.

[TraceLosu]

Tested it with ChartJS@4.1.1 and annotation@2.1.0, works perfectly fine with box and line annotations!