Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
yqchilde opened this issue May 4, 2024 · 0 comments
Open
1 task done

Comments

@yqchilde
Copy link

yqchilde commented May 4, 2024

Confirmation

  • I can confirm this problem is not reproducible with ECharts itself.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant