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

[ferremekelenkamp]

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

[stockiNail]

@kurkle @LeeLenaleee I'm not so familiar with packaging but I have the feeling we should change package.json as done for luxon adpater by PR #79. What do you think? Am I wrong?

[stockiNail]

I think there is the same issue on zoom plugin: https://stackoverflow.com/questions/74623256/error-err-package-path-not-exported-no-exports-main-defined-in-d-node-e-mo

[TraceLTRC]

I'm new to Javascript but I needed this library for a project of mine, so I tried stockiNail's suggestion and matched the package.json to luxon adapter's package.json, to see if it would work (repo). While it did import, using the box annotation in a chart results in a new error that I couldn't figure out much about.

import Head from 'next/head'
import Image from 'next/image'
import {
  Chart,
  Colors,
  BarController,
  CategoryScale,
  LinearScale,
  BarElement,
  Legend
} from 'chart.js'
import Annotation from 'chartjs-plugin-annotation'
import { Bar } from 'react-chartjs-2';

Chart.register(
  Colors,
  BarController,
  BarElement,
  CategoryScale,
  LinearScale,
  Legend,
  Annotation
);

const data = {
  labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
  datasets: [
    {
      label: 'Acquisitions by year',
      data: [10, 20, 15, 25, 22, 30, 28],
    }
  ]
};

const options = {
  animation: true,
  plugins: {
    legend: {
      display: true
    },
    tooltip: {
      enabled: true
    },
    annotation: {
      annotations: {
        box1: {
          type: 'box',
          xMin: 1,
          xMax: 2,
          yMin: 50,
          yMax: 70,
          backgroundColor: 'rgba(255, 99, 132, 0.25)',
        }
      }
    }
  }
}



export default function Home() {
  return (
    <div className={styles.container}>
      <Bar data={data} options={options}></Bar>
    </div>
  )
}

[stockiNail]

@TraceLosu thank you very much for testing with package .json updates. We are going to check before to apply them to this plugin.

About the issue related to label is undefined, it's quite weird because this should happen only when the annotation elements are not registered to CHART.JS but they should, being apply during the plugin registration. I would suggest to fix the packaging and then to check if the issue will remain because, as said, it shouldn't.

[stockiNail]

@TraceLosu I have sumbitted the PR to fix it. I have created a NETXJS project locally and using the PR dist files, I was able to solve the issue of the export (as you did as well).

I have used your code to check the other issue but I don't have any issue and the result is the following chart:

[TraceLTRC]

Weird, I still have the label is undefined error. I am sure I'm using the PR files because looking inside node-modules folder I see chartjs-plugin-annotation just links to your PR branch that I cloned to my local computer. I thought it was because of old versions so I deleted everything and recreated a new NEXTJS app. The error still occurs. Here is the result of npm list

chartjs-annotation-nextjs@0.1.0 C:\Users\tracel\Projects\chartjs-annotation-nextjs
├── chart.js@4.0.1
├── chartjs-plugin-annotation@2.1.0 -> .\..\chartjs-plugin-annotation
├── next@13.0.6
├── react-chartjs-2@5.0.1
├── react-dom@18.2.0
└── react@18.2.0

I may have installed it incorrectly?

[stockiNail]

it's really weird. Here is my npm list (the same you have):

textnext@0.1.0 ----
+-- chart.js@4.0.1
+-- chartjs-plugin-annotation@2.1.0 -> with js files of PR
+-- next@13.0.6
+-- react-chartjs-2@5.0.1
+-- react-dom@18.2.0
`-- react@18.2.0

I'm going to publish the project as soon as I have time.

[stockiNail]

@TraceLosu apologize for delay but I was busy.

I have published my test NextJS project: https://github.com/stockiNail/testnext

After npm i, I have copied the dist content and package.json of the PR to node_modules/chartjs-plugin-annotation.

Then npm run build and npm start and sounds working.

[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 <evert.timberg@gmail.com>",
   "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.

[TraceLTRC]

@TraceLosu apologize for delay but I was busy.

I have published my test NextJS project: https://github.com/stockiNail/testnext

After npm i, I have copied the dist content and package.json of the PR to node_modules/chartjs-plugin-annotation.

Then npm run build and npm start and sounds working.

Yup, works fine now. I did the same method of installing the PR to my project and it's also working fine. Thank you very much!