nuxt3 vue-echarts从6.7.3升级到7.0.1报错

[vozhuo]

请确认

• [X] 我可以确认这个问题无法在 ECharts 项目本身中复现。

您是如何将 Vue-ECharts 引入项目的？

通过 ES 模块 import

版本信息

vue 3.4.35
nuxt 3.12.4
echarts 5.5.1
vue-echarts 7.0.1

问题详情

nuxt3，vue-echarts从6.7.3升级到7.0.1报错Cannot read properties of undefined (reading 'head')，只出现在ssr: true时，ssr: false则无问题

问题复现

https://stackblitz.com/edit/nuxt-starter-fgxdpt

[kingyue737]

问题在于打包出来的index.js是通过下面的方式引入样式的。但是在服务端document是undefined。这个问题可能需要修复一下。

document.head.innerHTML += "<style>x-vue-echarts{display:block;width:100%;height:100%;min-width:0}\n</style>";

顺便一提，现在vue-echarts 和echarts 都支持ESM，不需要在nuxt config 中transpile他们：

export default defineNuxtConfig({
  ssr: true,
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
- build: {
-   transpile: [/echarts/],
- },
});

再顺便打个广告，用nuxt又需要ssr支持的话可以考虑一下Nuxt ECharts哦。用法和vue-echarts几乎相同哦（因为我就是照搬的）。

[kingyue737]

Workaround

如文档所述，你可以从vue-echarts/csp从导入VChart，这样就不会出错了。

https://stackblitz.com/edit/nuxt-starter-szf46q

[Justineo]

See @kingyue737's comments.

[Justineo]

@kingyue737 I’m thinking if we can find a way to merge Vue-ECharts and Nuxt ECharts to reduce duplication and future alignment, and also make it easier to use. WDYT?

[kingyue737]

@Justineo I would be very happy if Nuxt ECharts could be merged into Vue-ECharts. Will open a new discussion to track this.