[Bug] Does not work using Node 21.0.0

[DarioMagniPLRM]

Version

5.4.3

Link to Minimal Reproduction

None

Steps to Reproduce

Upgrade Node from v20.7.0 to v21.0.0

Current Behavior

The following error appears:

[...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:101
        var firefox = ua.match(/Firefox\/([\d.]+)/);
                         ^

TypeError: Cannot read properties of undefined (reading 'match')
    at detect ([...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:101:26)
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:97:9
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:22:68
    at Object.<anonymous> (D:\GitHub\math-engine\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:25:2)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1201:32)
    at Module._load (node:internal/modules/cjs/loader:1017:12)
    at Module.require (node:internal/modules/cjs/loader:1229:19)
    at require (node:internal/modules/helpers:177:18)

[...] = my project folder

Expected Behavior

Works as using Node v20.7.0

Environment

No response

Any additional comments?

No response

[mahdi-shojaee]

I encountered the same issue. The problem appears to be that the user agent is not defined in Node.js. I used JSDOM to create a workaround that solved the issue for me:

Important: You must call require("echarts") after defining the JSDOM props.

I only need server-rendered SVG images, not canvas images. An empty createCanvas is sufficient for my needs. However, if you are using canvas, you may need to use node-canvas.

const { JSDOM } = require("jsdom");

const { window } = new JSDOM();
global.window = window;
global.document = window.document;
global.navigator = window.navigator;
global.navigator.userAgent = window.navigator.userAgent;
global.navigator.language = window.navigator.language;

const echarts = require("echarts");

echarts.setPlatformAPI({
  createCanvas() {},
});

[Uzlopak]

In node 21.1.0 navigator has now userAgent. Is your issue now solved?

[DarioMagniPLRM]

@Uzlopak
I tried using node v21.1.0: the error is still present but different.

[...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:123
        env.touchEventsSupported = 'ontouchstart' in window && !browser.ie && !browser.edge;
                                                     ^

ReferenceError: window is not defined
    at detect ([...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:123:54)
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:97:9
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:22:68
    at Object.<anonymous> ([...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:25:2)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)

Node.js v21.1.0

[...] = my project folder

---

I tried also to apply the solution proposed by @mahdi-shojaee, adding jsdom before echarts import

import { JSDOM } from 'jsdom'

const { window } = new JSDOM();
global.window = window;
global.document = window.document;

import * as echarts from 'echarts'

The error is still present, but different:

[...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:16598
      document.documentElement.lang || navigator.language || navigator.browserLanguage).toUpperCase();
                                                                                        ^

TypeError: Cannot read properties of undefined (reading 'toUpperCase')
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:16598:89
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:16600:6
    at [...]\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:22:68
    at Object.<anonymous> (D:\GitHub\math-engine\node_modules\.pnpm\echarts@5.4.3\node_modules\echarts\dist\echarts.js:25:2)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)

Node.js v21.1.0

[mahdi-shojaee]

@DarioMagniPLRM, You didn't add the navigator and its userAgent and language properties.

[Uzlopak]

I added a PR language and expect that it lands the next days.

Also I guess the nodejs detection is not implemented like usual.

[mustaqball]

same error, any news?

[Uzlopak]

Issue is in zrender dependency

[Uzlopak]

Provided PR to zrender
ecomfe/zrender#1036