Failed to import - echarts，https://esm.sh/echarts No, but https://cdn.skypack.dev/echarts yes

[gitfei1231]

<div id="chart-panel" style="width: 100vw; height: 100vh;"></div>

<script type="module">
	// import * as echarts from "https://cdn.skypack.dev/echarts"; //正常显示
	import * as echarts from "https://esm.sh/echarts"; //不正常显示
	var chartDom = document.getElementById("chart-panel");
	var myChart = echarts.init(chartDom);
	var option;
	option = {
	  xAxis: {
	    type: "category",
	    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
	  },
	  yAxis: {
	    type: "value"
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: "line"
	    }
	  ]
	};
	option && myChart.setOption(option);
	//# sourceMappingURL=/index.js.map
</script>

[gitfei1231]

@ije Can you help me look at this problem

[alienzhou]

I tried the code but it did not work after switching to cdn.skypack.dev. esm.sh and skypack both have some problems.

It seems that skypack does not replace the process.env.NODE_ENV variable. So it may throw an error

code from: https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/unoptimized/lib/zrender.js

---

The reason may be that the echart's modules import things from the zrender and its submodule. As a result, some 'internal states' won't be shared.

// code from: https://esm.sh/v86/[email protected]/es2022/echarts.development.js

import * as zrender from "/v86/[email protected]/es2022/lib/zrender.development.js";
import { assert as assert13, each as each31, isFunction as isFunction12, isObject as isObject17, indexOf as indexOf6, bind as bind4, clone as clone8, setAsPrimitive as setAsPrimitive3, extend as extend13, createHashMap as createHashMap14, map as map15, defaults as defaults8, isDom, isArray as isArray20, noop as noop2, isString as isString18 } from "/v86/[email protected]/es2022/lib/core/util.development.js";
import env5 from "/v86/[email protected]/es2022/lib/core/env.development.js";
import timsort from "/v86/[email protected]/es2022/lib/core/timsort.development.js";
import Eventful2 from "/v86/[email protected]/es2022/lib/core/Eventful.development.js";

---

Currently using a bundled version may helps. You can add the 'bundle' query to the link:

// import * as echarts from "https://esm.sh/echarts";
import * as echarts from "https://esm.sh/echarts?bundle"; // works

[gitfei1231]

@alienzhou thank you, cdn.skypack.dev I added code and it works，。

[gitfei1231]

@alienzhou The bundle file is relatively large. If you do not use the bundle, do you have to wait for the author to repair it

[alienzhou]

@alienzhou The bundle file is relatively large.

The total files' size in esm.sh and skypack are almost the same. Although the no-bundled echarts package is small, it needs to import the zrender package.

It could have cost. When you want to import the zrender package directly (or used by another package), it will have additional cost to fetch a seperated zrender module.

[alienzhou]

Now esm.sh tries to bundle submodules. Maybe changing this behaviour will fix this. I'll try it later.

[gitfei1231]

现在 esm.sh 尝试捆绑行为子模块。可能会改变这种情况。稍后我会尝试。

Thanks for using the latest code you submitted. Everything is normal at present