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

[niklv]

Confirmation

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

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

[email protected]
[email protected]
[email protected]
[email protected]

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

[warflash]

Oh hey, a fellow nuxt bridge user^^ Did not get vue-echarts running in bridge so far either. Running into the error I described in #639 so just adding that onto here for reference I guess

[niklv]

Hi @warflash You can check my repo, that there are no nuxt-bridge at this point.

[warflash]

Oh actually, looking at your repro repo it does seem like you're missing a few nuxt and bridge specific things. This comment here shows an example of making vue-echarts work on nuxt3 https://github.com/nuxt/framework/discussions/2474#discussioncomment-1850092 but I did not find a way to make it work on bridge yet

[niklv]

Please, check repo again. I actually use nuxt 2 (nuxt-edge is actually nuxt 2.16 with Vue 2.7 inside). I use nuxt-edge as intermediate step to migrate to nuxt bridge. https://v3.nuxtjs.org/bridge/overview#upgrade-nuxt-2 After I upgrade to nuxt-edge. All my code should work fine to proceed to next steps.

Once the installation is complete, make sure both development and production builds are working as expected before proceeding.

All other my codebase works fine except vue-echarts. So I create minimal repoduction exaple to report bug that vue-echart not works with nuxt-edge (aka nuxt 2.16 that will be released in a few months)

[Justineo]

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

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

[niklv]

@Justineo thank you, workaround is working! Is there any plans to fix this in upcoming releases?

[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.

[Justineo]

Closing as a workaround is available.