import from chart.js cause "cannot use import statement outside a module"
echo178 opened this issue · comments
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
@echo178 sounds a bug. Just for confirmation, are you using annotation plugin version 2.1.2? Which chart,js version?
@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
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.
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
I try to create public repo to test this issue. github May I know is this error reproducible or persist on your side?
@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...
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.
yes, I try to config as "type" : "module" and it fixed.
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.
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 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"
}
}after overwriting package.json as you mentioned, it works for me also now
after overwriting package.json as you mentioned, it works for me also now
good to hear it! I have anyway submitted a PR #838
Thanks for quick fix! have a nice day!
@echo178 the PR is not merged yet and available. You should wait for a while ;)
@echo178 I have reopened the issue because the solution could be to set the plugin as module (and not add node exports).
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.
@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 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!
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).
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