Added file extensions to the import paths

README.md

@@ -1,3 +1,10 @@
+This is a simple update to the existing chartjs-plugin-annotation.js, to allow it to work when using Typescript/node16 or nodenext. Specifically, this solves this error:
+Error: node_modules/chartjs-plugin-annotation/types/index.d.ts(2,218): error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.
+
+All the credits go the original authors and package: https://github.com/chartjs/chartjs-plugin-annotation. For all intents and purposes, you probably want to use that package.
+
+Original README below:
+
 # chartjs-plugin-annotation.js
 
 [![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/chartjs/chartjs-plugin-annotation/ci.yml?branch=master)](https://github.com/chartjs/chartjs-plugin-annotation/actions/workflows/ci.yml)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "chartjs-plugin-annotation",
+  "name": "Node16-chartjs-plugin-annotation",
   "homepage": "https://www.chartjs.org/chartjs-plugin-annotation/index",
   "description": "Annotations for Chart.js",
   "version": "3.1.0",

types/element.d.ts

@@ -1,4 +1,4 @@
-import { AnnotationOptions } from './options';
+import { AnnotationOptions } from './options.js';
 
 export interface AnnotationBoxModel {
   x: number,

types/events.d.ts

@@ -1,5 +1,5 @@
 import { Chart, ChartEvent } from 'chart.js';
-import { AnnotationElement } from './element';
+import { AnnotationElement } from './element.js';
 
 export interface EventContext {
   chart: Chart,

types/index.d.ts

@@ -1,6 +1,6 @@
 import { Chart, ChartType, Plugin } from 'chart.js';
-import { AnnotationPluginOptions, BoxAnnotationOptions, EllipseAnnotationOptions, LabelAnnotationOptions, LineAnnotationOptions, PointAnnotationOptions, PolygonAnnotationOptions, DoughnutLabelAnnotationOptions } from './options';
-import { AnnotationElement } from './element';
+import { AnnotationPluginOptions, BoxAnnotationOptions, EllipseAnnotationOptions, LabelAnnotationOptions, LineAnnotationOptions, PointAnnotationOptions, PolygonAnnotationOptions, DoughnutLabelAnnotationOptions } from './options.js';
+import { AnnotationElement } from './element.js';
 
 declare module 'chart.js' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -25,7 +25,7 @@ declare const Annotation: Plugin & {
 
 export default Annotation;
 
-export * from './element';
-export * from './events';
-export * from './label';
-export * from './options';
+export * from './element.js';
+export * from './events.js';
+export * from './label.js';
+export * from './options.js';

types/label.d.ts

@@ -1,6 +1,6 @@
 import { Color, FontSpec, BorderRadius } from 'chart.js';
-import { PartialEventContext } from './events';
-import { DrawTime, Scriptable, ShadowOptions } from './options';
+import { PartialEventContext } from './events.js';
+import { DrawTime, Scriptable, ShadowOptions } from './options.js';
 
 type percentString = `${number}%`;
 export type LabelPosition = 'start' | 'center' | 'end' | percentString;

types/options.d.ts

@@ -1,7 +1,7 @@
 import { Chart, Color, PointStyle, BorderRadius, CoreInteractionOptions } from 'chart.js';
-import { AnnotationEvents, PartialEventContext, EventContext } from './events';
-import { LabelOptions, BoxLabelOptions, LabelTypeOptions, DoughnutLabelOptions } from './label';
-import { AnnotationBoxModel, AnnotationElement } from './element';
+import { AnnotationEvents, PartialEventContext, EventContext } from './events.js';
+import { LabelOptions, BoxLabelOptions, LabelTypeOptions, DoughnutLabelOptions } from './label.js';
+import { AnnotationBoxModel, AnnotationElement } from './element.js';
 
 export type DrawTime = 'afterDraw' | 'afterDatasetsDraw' | 'beforeDraw' | 'beforeDatasetsDraw' | number;