Nuxt-edge Object(...)() is null / context is null

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

echarts@5.3.3
vue@2.7.8
vue-echarts@6.2.3
nuxt-edge@2.16.0-27616340.013f051b

Details

I have a project with vue-echart and nuxt 2 (version 2.15). I try to start migration to nuxt 3. First steps is to upgrade nuxt to nuxt-edge. It requires to remove @nuxtjs/composition-api cause Nuxt 2.16 is based on Vue 2.7. At this step I expect that all will run fine. Cause Vue 2.7 supports composition API. But it not.

Here is my browser console output:

There are serveral warnings: [Vue warn]: inject() can only be used inside setup() or functional components. [Vue warn]: globally imported h() can only be invoked when there is an active component instance, e.g. synchronously in a component's render or setup function. [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

And two errors: TypeError: Object(...)() is null and TypeError: context is null

Reproduction

https://github.com/niklv/nuxt_echarts_bug

[Justineo]

Try add this to nuxt.config.js as a workaround:

{
  alias: {
    vue: 'vue/dist/vue.runtime.esm.js'
  }
}

[Justineo]

Not sure there’s anything can be done on our side. It seems that with Nuxt’s webpack config, the imported vue from vue-demi refers to the cjs version.