[Bug] package.json is missing a package "type": "module" description

[AndreyYolkin]

Version

5.3.1

Link to Minimal Reproduction

No response

Steps to Reproduce

Create app with nuxt bridge
Build that app using nuxi build
preview this app using nuxi preview

Current Behavior

Node throws error while trying import package as cjs module

Expected Behavior

Node import package as esm module

Environment

- OS: Windows 11
- Browser: Chrome 97
- Framework: Nuxt 2 Bridge

Any additional comments?

After building the application with nuxt bridge and running the application, Node tryes to import echarts and zrender as CJS modules, but there are ESM, as I can see. After I specified "type": "module" in both packages, the problem has been solved.

Please specify module type in package.json

[echarts-bot]

I'm sorry to close this issue for it lacks the necessary title. Please provide a descriptive and as concise as possible title to describe your problems or requests and then the maintainers or I will reopen this issue.

Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.

A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.

Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.

[dominikg]

This is a bug. import * as echarts from 'echarts/core' leads to

export * from './lib/export/core.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)

because the content of .js files is determined by the value for type in the closest package.json.

A proper fix for this requires a major release, as it affects the way current users import (or require) echarts.
If you want to continue supporting cjs you need an exports map.
A guide for releasing dual packages can be found here https://antfu.me/posts/publish-esm-and-cjs

Alternatively an echarts-esm package could be forked/released that no longer supports cjs

One possible workaround to fix this within 5.x would be to add files with explicit .mjs extension for all current js files that are imported anywhere or used as entry points.

ps. zrender has a similar issue.

[kingyue737]

Cannot make echarts working with vitest because of this issue. Please considering fixing package.json according to this guide:
https://github.com/sheremet-va/dual-packaging

[FibreFoX]

Having this only as ESM makes it unusable following the "minimal bundle" instructions when using CRA/using Jest.
facebook/create-react-app#12063

It is impossible to run tests, but works fine while building or developing ... makes the "minimal bundle" with TypeScripts unusable.

Relating other issues:
#14864
#14965

[AndreyYolkin]

Bump, this feature is really important as Vite-based framework sometimes does not work with this format.
@100pah sorry for mentioning, but may you ship this at 5,5 or nearest milestones.
https://github.com/sheremet-va/dual-packaging requires only does not require a lot

[Sujith1799]

@FibreFoX any workaround or fixes to get jest working with minimal bundle?

[FibreFoX]

@Sujith1799 not yet, the only workaround I know is to not import the page when testing, as suggested here: facebook/create-react-app#12063 (comment)

Something like this:

    // important: exclude this from testing, because Jest is unable to work with Apache EChart
    //  https://github.com/facebook/create-react-app/issues/12063
    const YourComponentWithEcharts = (process.env.NODE_ENV === "test") ? (() => {
        return null;
    }) : lazy(() => import("./YourComponentWithEcharts"));

This does not "make it testable", it just makes jest jump over the problematic stuff (until its fixed).

Just remember as this uses the lazy-loading stuff, to wrap a <Suspense> around it:

                    <Suspense fallback={<PageLoadingSkeleton />}>
                        <YourComponentWithEcharts/>
                    </Suspense>

[Sujith1799]

Cool Thanks for this.

[Sujith1799]

@FibreFoX , when you implemented echarts in your repo, did you face any GC heap out of memory error.

Im using NextJs and I keep getting out of memory error during the next build. I have also tried increasing the node options to 5 gigs like this NODE_OPTIONS=\"--max_old_space_size=5120\" but still no luck and even with tree shakeable version I'm getting this error.

This is how I have implemented the echarts in my app

` const chartRef = React.useRef(null)
useEffect(() => {
const chart = init(chartRef.current!, 'light', {
renderer: 'svg',
});

function resizeChart() {
  chart?.resize();
}

window.addEventListener('resize', resizeChart);
chart.setOption(option);

// Return cleanup function
return () => {
  chart.dispose();
  window.removeEventListener('resize', resizeChart);
};

}, [option]);

`

[FibreFoX]

@Sujith1799 Thats a different topic, please let this thread stay "clean" on the original topic please. (but no, I haven't seen the problem, as I use React with this wrapper component: https://github.com/hustcc/echarts-for-react)

[Jordi-LG]

Hi, any updates for the issue ? I'm also stuck and got this error when i tried to compil my app.

import * as echarts from 'echarts' with echarts 5.4.1

export * from './lib/export/charts.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)

[Jelenkee]

similar issue here
in fact import * as echarts from "echarts" does work, but import * as echarts from "echarts/core" doesn't.
Error: export * from './lib/export/core.js';

[phlegx]

Same problem using Node, Vite and echarts 5.4.2.

export * from './lib/export/core.js';
^^^^^^

SyntaxError: Unexpected token 'export'
  ...

[NeoN0x]

Same issue for me.

Nuxt 3.8.2 & latest echarts.

[rock-eb]

Same problem for me.
[email protected] and [email protected]

[100pah]

Fixed by #19513