search

chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js
MIT License
609 stars 329 forks source link

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

Closed echo178 closed 1 year ago

echo178 commented 1 year ago

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 annotation_bug

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)

annotation_bug_2

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

stockiNail commented 1 year ago

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

echo178 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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.

annotation_bug_3

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 chart js_bug

echo178 commented 1 year ago

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

stockiNail commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

stockiNail commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

stockiNail commented 1 year ago

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

good to hear it! I have anyway submitted a PR https://github.com/chartjs/chartjs-plugin-annotation/pull/838

echo178 commented 1 year ago

Thanks for quick fix! have a nice day!

stockiNail commented 1 year ago

@echo178 the PR is not merged yet and available. You should wait for a while ;)

stockiNail commented 1 year ago

@echo178 I have reopened the issue because the solution could be to set the plugin as module (and not add node exports).

gterras commented 1 year ago

Thanks for tackling this ! FYI version 2.1.2 fails with sveltekit/vite with Cannot read properties of undefined (reading 'default'), working fine with 2.1.1.

stockiNail commented 1 year ago

@gterras the PR #838 is addressing it. vite doesn't have any specific exports. We are working on that.

stockiNail commented 1 year ago

@gterras I have done some tests and it seems working with version 2.1.2: https://codesandbox.io/s/tender-forest-g83nrl Ihave also tested locally with new version of vite and it's working as well. Maybe you can provide a sandobx in order to reproduce the issue.

gterras commented 1 year ago

@gterras I have done some tests and it seems working with version 2.1.2: https://codesandbox.io/s/tender-forest-g83nrl Ihave also tested locally with new version of vite and it's working as well. Maybe you can provide a sandobx in order to reproduce the issue.

The issue seems to happen only during SSR (initial load). No error on subsequent client navigation. I'll send a repro repo next week if current PR doesn't solve it!

stockiNail commented 1 year ago

No error on subsequent client navigation. I'll send a repro repo next week if current PR doesn't solve it!

Thank youu! It will be very helpful! On my test repo, it works with 2.1.2 and new PR (type: module).

faulander commented 1 year ago

Doesn't work for me with: chart.js@3.9.1 chartjs-plugin-annotation@2.2.1 vite@4.3.5

also 2.1.2 doesn't work :/

i get the same error:

at async ESMLoader.import (node:internal/modules/esm/loader:533:24) /.../node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js:7 import { Element, defaults, Animations, Chart } from 'chart.js'; ^^^^^^

SyntaxError: Cannot use import statement outside a module