search

ecomfe / vue-echarts

Vue.js component for Apache ECharts™.
https://vue-echarts.dev
MIT License
9.43k stars 1.48k forks source link

Unable to compile after the introduction of vitepress, error: ERR-REQUIRE-ESM #782

Open yqchilde opened 1 month ago

yqchilde commented 1 month ago

Confirmation

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

Legend: production dependency, optional only, dev only

vue-3@0.1.0 /workspaces/workspace

dependencies:
echarts 5.5.0
vue 3.4.26
vue-echarts 6.7.1

Details

➜  workspace git:(master) ✗ pnpm run build

> vue-3@0.1.0 build /workspaces/workspace
> vitepress build

  vitepress v1.1.4

✓ building client + server bundles...
⠼ rendering pages...Error [ERR_REQUIRE_ESM]: require() of ES Module /workspaces/workspace/node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/core.js from /workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js not supported.
Instead change the require of core.js in /workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js:1:97)
    at async loadPage (file:///workspaces/workspace/.vitepress/.temp/Content.B7V80QjJ.js:951:18)
    at async Object.go (file:///workspaces/workspace/.vitepress/.temp/Content.B7V80QjJ.js:940:5)
    at async render (file:///workspaces/workspace/.vitepress/.temp/app.js?t=1714800373763:4661:3)
    at async renderPage (file:///workspaces/workspace/node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.8_postcss@8.4.38_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-CXVdC751.js:46629:19)
    at async pMap.concurrency (file:///workspaces/workspace/node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.8_postcss@8.4.38_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-CXVdC751.js:46873:11)
    at async file:///workspaces/workspace/node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.8_postcss@8.4.38_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-CXVdC751.js:2614:20 {
  code: 'ERR_REQUIRE_ESM'
}
/workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js:1
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue-demi"),t=require("echarts/core"),n=require("resize-detector"),r=function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var o=["getWidth","getHeight","getDom","getOption","resize","dispatchAction","convertToPixel","convertFromPixel","containPixel","getDataURL","getConnectedDataURL","appendData","clear","isDisposed","dispose"];function i(e){return t=Object.create(null),o.forEach((function(n){t[n]=function(t){return function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];if(!e.value)throw new Error("ECharts is not initialized yet.");return e.value[t].apply(e.value,n)}}(n)})),t;var t}var a={autoresize:[Boolean,Object]},u=/^on[^a-z]/,s=function(e){return u.test(e)};function c(t,n){var r=e.isRef(t)?e.unref(t):t;return r&&"object"==typeof r&&"value"in r?r.value||n:r||n}var l="ecLoadingOptions";var f={loading:Boolean,loadingOptions:Object},p=null,v="x-vue-echarts";var d=[],h=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,r=!0===t.prepend?"prepend":"append",o=!0===t.singleTag,i="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(o){var a=d.indexOf(i);-1===a&&(a=d.push(i)-1,h[a]={}),n=h[a]&&h[a][r]?h[a][r]:h[a][r]=u()}else n=u();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function u(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),o=0;o<n.length;o++)e.setAttribute(n[o],t.attributes[n[o]]);var a="prepend"===r?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}("x-vue-echarts{display:block;position:relative;width:100%;height:100%;min-width:0}\n.vue-echarts-inner{position:absolute;top:0;right:0;bottom:0;left:0}\n",{});var g=function(){if(null!=p)return p;if("undefined"==typeof HTMLElement||"undefined"==typeof customElements)return p=!1;try{new Function("tag","class EChartsElement extends HTMLElement {\n  __dispose = null;\n\n  disconnectedCallback() {\n    if (this.__dispose) {\n      this.__dispose();\n      this.__dispose = null;\n    }\n  }\n}\n\nif (customElements.get(tag) == null) {\n  customElements.define(tag, EChartsElement);\n}\n")(v)}catch(e){return p=!1}return p=!0}();e.Vue2&&e.Vue2.config.ignoredElements.push(v);var m="ecTheme",O="ecInitOptions",E="ecUpdateOptions",b=/(^&?~?!?)native:/,_=e.defineComponent({name:"echarts",props:r(r({option:Object,theme:{type:[Object,String]},initOptions:Object,updateOptions:Object,group:String,manualUpdate:Boolean},a),f),emits:{},inheritAttrs:!1,setup:function(o,a){var u=a.attrs,f=e.shallowRef(),p=e.shallowRef(),v=e.shallowRef(),d=e.shallowRef(),h=e.inject(m,null),_=e.inject(O,null),y=e.inject(E,null),j=e.toRefs(o),x=j.autoresize,w=j.manualUpdate,L=j.loading,T=j.loadingOptions,A=e.computed((function(){return d.value||o.option||null})),C=e.computed((function(){return o.theme||c(h,{})})),z=e.computed((function(){return o.initOptions||c(_,{})})),S=e.computed((function(){return o.updateOptions||c(y,{})})),P=e.computed((function(){return function(e){var t={};for(var n in e)s(n)||(t[n]=e[n]);return t}(u)})),R={},U=e.getCurrentInstance().proxy.$listeners,D={};function I(n){if(p.value){var r=v.value=t.init(p.value,C.value,z.value);o.group&&(r.group=o.group),Object.keys(D).forEach((function(e){var t=D[e];if(t){var n=e.toLowerCase();"~"===n.charAt(0)&&(n=n.substring(1),t.__once__=!0);var o=r;if(0===n.indexOf("zr:")&&(o=r.getZr(),n=n.substring(3)),t.__once__){delete t.__once__;var i=t;t=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];i.apply(void 0,e),o.off(n,t)}}o.on(n,t)}})),x.value?e.nextTick((function(){r&&!r.isDisposed()&&r.resize(),i()})):i()}function i(){var e=n||A.value;e&&r.setOption(e,S.value)}}function k(){v.value&&(v.value.dispose(),v.value=void 0)}U?Object.keys(U).forEach((function(e){b.test(e)?R[e.replace(b,"$1")]=U[e]:D[e]=U[e]})):Object.keys(u).filter((function(e){return s(e)})).forEach((function(e){var t=e.charAt(2).toLowerCase()+e.slice(3);if(0!==t.indexOf("native:"))"Once"===t.substring(t.length-4)&&(t="~".concat(t.substring(0,t.length-4))),D[t]=u[e];else{var n="on".concat(t.charAt(7).toUpperCase()).concat(t.slice(8));R[n]=u[e]}}));var N=null;e.watch(w,(function(t){"function"==typeof N&&(N(),N=null),t||(N=e.watch((function(){return o.option}),(function(e,t){e&&(v.value?v.value.setOption(e,r({notMerge:e!==t},S.value)):I())}),{deep:!0}))}),{immediate:!0}),e.watch([C,z],(function(){k(),I()}),{deep:!0}),e.watchEffect((function(){o.group&&v.value&&(v.value.group=o.group)}));var M=i(v);return function(t,n,o){var i=e.inject(l,{}),a=e.computed((function(){return r(r({},c(i,{})),null==o?void 0:o.value)}));e.watchEffect((function(){var e=t.value;e&&(n.value?e.showLoading(a.value):e.hideLoading())}))}(v,L,T),function(r,o,i){var a=null;e.watch([i,r,o],(function(e,r,o){var i=e[0],u=e[1],s=e[2];if(i&&u&&s){var c=!0===s?{}:s,l=c.throttle,f=void 0===l?100:l,p=c.onResize,v=function(){u.resize(),null==p||p()};a=f?t.throttle(v,f):v,n.addListener(i,a)}o((function(){i&&a&&n.removeListener(i,a)}))}))}(v,x,p),e.onMounted((function(){I()})),e.onBeforeUnmount((function(){g&&f.value?f.value.__dispose=k:k()})),r({chart:v,root:f,inner:p,setOption:function(e,t){o.manualUpdate&&(d.value=e),v.value?v.value.setOption(e,t||{}):I(e)},nonEventAttrs:P,nativeListeners:R},M)},render:function(){var t=e.Vue2?{attrs:this.nonEventAttrs,on:this.nativeListeners}:r(r({},this.nonEventAttrs),this.nativeListeners);return t.ref="root",t.class=t.class?["echarts"].concat(t.class):"echarts",e.h(v,t,[e.h("div",{ref:"inner",class:"vue-echarts-inner"})])}});exports.INIT_OPTIONS_KEY=O,exports.LOADING_OPTIONS_KEY=l,exports.THEME_KEY=m,exports.UPDATE_OPTIONS_KEY=E,exports.default=_;
                                                                                                ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /workspaces/workspace/node_modules/.pnpm/echarts@5.5.0/node_modules/echarts/core.js from /workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js not supported.
Instead change the require of core.js in /workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/workspaces/workspace/node_modules/.pnpm/vue-echarts@6.7.1_@vue+runtime-core@3.4.26_echarts@5.5.0_vue@3.4.26/node_modules/vue-echarts/dist/index.cjs.min.js:1:97)
    at async loadPage (file:///workspaces/workspace/.vitepress/.temp/Content.B7V80QjJ.js:951:18)
    at async Object.go (file:///workspaces/workspace/.vitepress/.temp/Content.B7V80QjJ.js:940:5)
    at async render (file:///workspaces/workspace/.vitepress/.temp/app.js?t=1714800373763:4661:3)
    at async renderPage (file:///workspaces/workspace/node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.8_postcss@8.4.38_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-CXVdC751.js:46629:19)
    at async pMap.concurrency (file:///workspaces/workspace/node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.8_postcss@8.4.38_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-CXVdC751.js:46873:11)
    at async file:///workspaces/workspace/node_modules/.pnpm/vitepress@1.1.4_@algolia+client-search@4.23.3_@types+node@20.12.8_postcss@8.4.38_search-insights@2.13.0/node_modules/vitepress/dist/node/serve-CXVdC751.js:2614:20 {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.9.0
 ELIFECYCLE  Command failed with exit code 1.

Reproduction

https://codesandbox.io/p/devbox/agitated-ives-8h3nlq-bak-forked-ltrxqg