search

ecomfe / echarts-gl

Extension pack for Apache ECharts, providing globe visualization and 3D plots.
BSD 3-Clause "New" or "Revised" License
2.57k stars 844 forks source link

TypeError: Cannot read properties of undefined (reading 'registerPostInit') #481

Open mayfield opened 1 year ago

mayfield commented 1 year ago

Hello,

I use the ESM dist build of echarts directly in my web pages a la.,

// Regular JS module, loaded with script[type="module"] tag...
import * as echarts from 'path/to/stock/echarts.esm.js';
// Do stuff with echarts like echarts.init(...)

This works great and I've been a happy echarts user for some time. I'd like to start using echarts-gl but I'm finding that the provided dist/*.js files don't seem to be compatible with native ES6 module usage of echarts. It's not uncommon for me to run into use cases where I need a non-es6-module script from my module code and I can generally still just do an import 'normal.js' and be on my way. However when I try this with echarts-gl I get this error...

echarts-gl.mjs:26550 Uncaught TypeError: Cannot read properties of undefined (reading 'registerPostInit')
    at ./src/export/all.js (echarts-gl.mjs:26550:19)
    at __webpack_require__ (echarts-gl.mjs:65691:41)
    at echarts-gl.mjs:65725:18
    at echarts-gl.mjs:65726:12
    at webpackUniversalModuleDefinition (echarts-gl.mjs:9:24)
    at echarts-gl.mjs:10:3

At first I assumed it was because echarts-gl needs echarts to be available on the global scope, so I tried this as a workaround...

import * as ec from '../deps/src/echarts.mjs';
window.echarts = ec; // make echarts-gl happy (or maybe now)
import '../deps/src/echarts-gl.mjs';

But this still fails because the echart-gl webpack wrappers are looking for some webpack proprietary global scope. I.e. it only wants to work with the non ESM dist builds of echarts (I think).

I wanted to file this issue in the hopes that some native ESM builds could be provided in the dist output so causal web pages like mine can get up and running with echarts-gl without have to resort to using complicated build tools or setting up the full dev env for echarts extensions.

mayfield commented 1 year ago

Workaround update: I found that the workaround I was attempting before will actually work so long as you wait for the time native ES6 import to finish first. So now I'm doing an async import('echarts-gl.js') in a function call after all the native modules are loaded and processed and I'm able to use echarts-gl now.