import from chart.js cause "cannot use import statement outside a module"

[echo178]

Hello,
When I try to import annotation plugin at NodeJS as follows
import annotation from 'chartjs-plugin-annotation'
it is causing an error like below

So What I have done to fix it is I downgrade to 2.0.0 and change chartjs-plugin-annotation.esm as follows

import { Element, defaults, Animations, Chart } from 'chart.js/auto' and everything work fines. (That fix doesn't work at ver 2.1.0)

May I know what is wrong in here as I don't find similar issue mentioned or Is it only happening to me

[stockiNail]

@echo178 sounds a bug. Just for confirmation, are you using annotation plugin version 2.1.2? Which chart,js version?

[echo178]

@echo178 sounds a bug. Just for confirmation, are you using annotation plugin version 2.1.2? Which chart,js version?

chart.js is ^3.9.1 and annotation plugin is 2.1.2

[stockiNail]

Thank you! I'd like to reproduce the issue maybe testing with chartjs 4 where packaging is changed. Do you have a public repo where I can test it?
FYI from plugin version >= 2.1.0, the packaging was a bit changed to support chartjs 4 distributed as module and maybe this is creating the issue.

[echo178]

Sorry there is no public repo but what I am doing is just importing that two module in NodeJS

import Chart from 'chart.js/auto'
import annotation from 'chartjs-plugin-annotation'

so it may be easy to test for you,

I tested it with chart.js : 4.2.0 and annotation plugin: 2.1.2 and the error persists for me.

The difference with chart.js 4.2 is I also have to import chart.js as import Chart from 'chart.js/auto' as there is no default export as follow

[echo178]

I try to create public repo to test this issue. github May I know is this error reproducible or persist on your side?

[stockiNail]

@echo178 GREAT!!! I was already doing it (and I see the issue even if I had some doubts about your config) but I prefer using your repo. Investigating...

[stockiNail]

First feedback. To work correctly, annotation plugin should be configure as "type": "module". @echo178 if you can try, it should work. But unfortunately, setting as module, other integrations fail (I'm testing also with next). Need more time to understand which is the best config.

[echo178]

yes, I try to config as "type" : "module" and it fixed.

[stockiNail]

Myabe I have found the solution, specifying a specific exports for node (removing "type": "module"), before the "import".

  "exports": {
    "types": "./types/index.d.ts",
    "node": "./dist/chartjs-plugin-annotation.min.js",
    "import": "./dist/chartjs-plugin-annotation.esm.js",
    "require": "./dist/chartjs-plugin-annotation.min.js",
    "script": "./dist/chartjs-plugin-annotation.min.js"
  },

Apologize if I'm asking you another test but locally it works to me.
It also working on next.
I'm going to submit a PR.

[echo178]

it is causing me The requested module 'chartjs-plugin-annotation' does not provide an export named 'default' with that change. Am I missing something

[stockiNail]

it is causing me The requested module 'chartjs-plugin-annotation' does not provide an export named 'default' with that change. Am I missing something

It's weird because locally (using your repo) is working without any issue.

package.json

{
  "name": "reactga",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chart.js": "^4.2.0",
    "chartjs-plugin-annotation": "^2.1.2",
    "react-ga4": "^2.0.0"
  }
}

node_modules/chartjs-plugin-annotation/package.json

{
  "name": "chartjs-plugin-annotation",
  "homepage": "https://www.chartjs.org/chartjs-plugin-annotation/index",
  "description": "Annotations for Chart.js",
  "version": "2.1.2",
  "author": "Evert Timberg <evert.timberg@gmail.com>",
  "license": "MIT",
  "main": "dist/chartjs-plugin-annotation.js",
  "module": "dist/chartjs-plugin-annotation.esm.js",
  "types": "types/index.d.ts",
  "jsdelivr": "dist/chartjs-plugin-annotation.min.js",
  "unpkg": "dist/chartjs-plugin-annotation.min.js",
  "exports": {
    "types": "./types/index.d.ts",
    "node": "./dist/chartjs-plugin-annotation.min.js",
    "import": "./dist/chartjs-plugin-annotation.esm.js",
    "require": "./dist/chartjs-plugin-annotation.min.js",
    "script": "./dist/chartjs-plugin-annotation.min.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/chartjs/chartjs-plugin-annotation.git"
  },
  "files": [
    "dist/*.js",
    "types/*.d.ts"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "karma start --auto-watch --no-single-run --browsers chrome",
    "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox",
    "docs": "npm run build && vuepress build docs --no-cache",
    "docs:dev": "npm run build && vuepress dev docs --no-cache",
    "lint": "concurrently --group \"npm:lint-*\"",
    "lint-js": "eslint \"test/**/*.js\" \"src/**/*.js\"",
    "lint-md": "eslint \"**/*.md\"",
    "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
    "test": "cross-env NODE_ENV=test concurrently --group \"npm:test-*\"",
    "test-karma": "karma start --auto-watch --single-run",
    "test-lint": "npm run lint",
    "test-types": "tsc -p types/tests/",
    "test-types-integration": "mocha --full-trace test/integration/*-test.js"
  },
  "devDependencies": {
    "@rollup/plugin-json": "^5.0.2",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-terser": "^0.1.0",
    "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "chart.js": "^4.1.2",
    "chartjs-test-utils": "^0.5.0",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.2.0",
    "eslint-config-chartjs": "^0.3.0",
    "eslint-plugin-es": "^4.1.0",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-markdown": "^2.0.1",
    "fs-extra": "^10.0.0",
    "karma": "^6.4.1",
    "karma-chrome-launcher": "^3.1.1",
    "karma-coverage": "^2.2.0",
    "karma-firefox-launcher": "^2.1.2",
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "karma-rollup-preprocessor": "^7.0.7",
    "markdown-it-include": "^2.0.0",
    "mocha": "^9.1.3",
    "pixelmatch": "^5.2.1",
    "rollup": "^3.7.0",
    "rollup-plugin-istanbul": "^4.0.0",
    "typedoc": "^0.23.8",
    "typedoc-plugin-markdown": "^3.13.3",
    "typescript": "^4.2.4",
    "vuepress": "^1.9.7",
    "vuepress-plugin-flexsearch": "^0.3.0",
    "vuepress-plugin-redirect": "^1.2.5",
    "vuepress-plugin-typedoc": "^0.10.0",
    "vuepress-theme-chartjs": "^0.2.0"
  },
  "peerDependencies": {
    "chart.js": ">=3.7.0"
  }
}

[echo178]

after overwriting package.json as you mentioned, it works for me also now

[stockiNail]

after overwriting package.json as you mentioned, it works for me also now

good to hear it! I have anyway submitted a PR #838