Need a valid ESM entry

[kingyue737]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

Legend: production dependency, optional only, dev only

[email protected] D:\webprojects\vue2-echarts

dependencies:
echarts 5.3.2
vue 2.6.14

Details

I'm using vue-echarts with vitest. But vitest throw the following error:

SyntaxError: Unexpected token 'export'
 ❯ Object.compileFunction https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:341311
 ❯ wrapSafe https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:218270
 ❯ Module._compile https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:218638
 ❯ Module._extensions..js https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:219666
 ❯ Module.load https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:217692
 ❯ Module._load https:/vitest-dev-vitest-fhmvl9.w.staticblitz.com/blitz.ad37e903755d89e0f5d9999e69be73a0c6cb6bcc.js:6:215263

Module /home/projects/vitest-dev-vitest-fhmvl9/node_modules/echarts/core.js:20 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "echarts" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    deps: {
      inline: [
        "echarts"
      ]
    }
  }
}

According to the comment of vitest member https://github.com/vitest-dev/vitest/issues/1452#issuecomment-1150750725 , this is because vue-charts points to cjs entry that uses require which is not intercepted by vitest.

See also his comment in another issue of vue-echarts here: https://github.com/ecomfe/vue-echarts/issues/601#issuecomment-1150797371

Reproduction

stackblitz.com/edit/vitest-dev-vitest-fhmvl9

[Justineo]

Let's keep this open. We'll work on this once ECharts and ZRender fix this on their side.

[AndreyYolkin]

Let's keep this open. We'll work on this once ECharts and ZRender fix this on their side.

I bumped issue in apache/echarts repo, may be you need to leave the comment about it in https://github.com/apache/echarts/issues/16709

[maartenbrakkee]

For anybody interested to fix it in their project with echarts 5.4.0 and vue-echarts 6.2.3:

• add patch-package and setup the postinstall script ("postinstall": "patch-package",)
• create a folder named patches in the root folder of your project
• add the following files to the patches folder
• run npm install / yarn install

echarts+5.4.0.patch:

diff --git a/node_modules/echarts/package.json b/node_modules/echarts/package.json
index 9ee583c..cd4513e 100644
--- a/node_modules/echarts/package.json
+++ b/node_modules/echarts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "echarts",
+  "type": "module",
   "version": "5.4.0",
   "description": "Apache ECharts is a powerful, interactive charting and data visualization library for browser",
   "license": "Apache-2.0",

vue-echarts+6.2.3.patch:

diff --git a/node_modules/vue-echarts/package.json b/node_modules/vue-echarts/package.json
index a571fde..174515f 100644
--- a/node_modules/vue-echarts/package.json
+++ b/node_modules/vue-echarts/package.json
@@ -1,5 +1,13 @@
 {
   "name": "vue-echarts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.esm.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "version": "6.2.3",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <[email protected]>",

[AndreyYolkin]

For anybody interested to fix it in their project with echarts 5.4.0 and vue-echarts 6.2.3:

• add patch-package and setup the postinstall script ("postinstall": "patch-package",)
• create a folder named patches in the root folder of your project
• add the following files to the patches folder
• run npm install / yarn install

echarts+5.4.0.patch:

diff --git a/node_modules/echarts/package.json b/node_modules/echarts/package.json
index 9ee583c..cd4513e 100644
--- a/node_modules/echarts/package.json
+++ b/node_modules/echarts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "echarts",
+  "type": "module",
   "version": "5.4.0",
   "description": "Apache ECharts is a powerful, interactive charting and data visualization library for browser",
   "license": "Apache-2.0",

vue-echarts+6.2.3.patch:

diff --git a/node_modules/vue-echarts/package.json b/node_modules/vue-echarts/package.json
index a571fde..174515f 100644
--- a/node_modules/vue-echarts/package.json
+++ b/node_modules/vue-echarts/package.json
@@ -1,5 +1,13 @@
 {
   "name": "vue-echarts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.esm.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "version": "6.2.3",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <[email protected]>",

Yes, I also walked this path, but it's becomming impossible when I convert my project into npm package. Now I'm trying to find a way to prevent installation of vue-echarts in project root node_modules, but in my package root instead

[phlegx]

Hi!

If using with Vite, Node Vite dev server and Echarts v5.4.2 I get the following error using this code:

import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])

Error

node_modules/echarts/core.js:20
export * from './lib/export/core.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    ...

[kingyue737]

Meet this issue again in Nuxt with SSR enabled. https://nuxt.com/docs/guide/concepts/esm#what-kinds-of-problems-can-there-be

Need conditional-exports in a Node.js ESM context

[kingyue737]

Let's keep this open. We'll work on this once ECharts and ZRender fix this on their side.

Both zrender v5.5 and echarts v5.5 have been released 🎉

The dependency resize-detector also needs to be fixed

[lnoss]

Let's keep this open. We'll work on this once ECharts and ZRender fix this on their side.

Both zrender v5.5 and echarts v5.5 have been released 🎉

The dependency resize-detector also needs to be fixed

Just in time for me. Relevant links: apache/echarts#19513 and ecomfe/zrender#1051.

[mdoesburg]

@Justineo Any timeline on this? Would be really appreciated. Resorting to patching atm.