[Bug] Importing echarts-gl in NextJs

[alikleit]

Version

5.4.1

Link to Minimal Reproduction

https://stackblitz.com/edit/github-yvhxtq-mctmmg?file=pages/index.js

Steps to Reproduce

I'm using the 3D surface options from echarts examples in my Nextjs application. This requires 'echarts-gl' to be imported, so I tried:

import 'echarts-gl'

and

const echartgl = dynamic(() => import('echarts-gl'), {
  ssr: false
});

along with next-transpile-modules

//next.config.js 
const withTM = require('next-transpile-modules')(['echarts', 'echarts-gl']);

module.exports = withTM({...})

However, I'm getting the following Error:

ReferenceError: self is not defined

Any way to import that library into nextjs to make the echart-gl related graphs work? I have reproduced this issue in a sandbox.

Current Behavior

Getting Error "ReferenceError: self is not defined" when importing "echarts-gl"

Expected Behavior

Ability to import echarts-gl into nextjs without having that error.

Environment

No response

Any additional comments?

No response

[lliuYuuan]

[alikleit]

Thank you.

Actually All features of next-transpile-modules are now natively built-in Next.js 13.1, though I had to include both echarts and echarts-gl to make it work:

transpilePackages: ['echarts', 'echarts-gl'],