Incompatibility with Quasar v1 + Vue 2.7?

[uwburn]

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

chart-test@0.0.1 /home/holonix/Desktop/chart-test
├─┬ @quasar/app@2.4.3
│ ├── vue@2.7.14
│ └─┬ vuex@3.6.2
│   └── vue@2.7.14 deduped
├── echarts@5.4.2
└─┬ vue-echarts@6.5.4
  ├── echarts@5.4.2 deduped
  ├─┬ vue-demi@0.13.11
  │ └── vue@2.7.14 deduped
  └── vue@2.7.14 deduped

Details

I'm trying to upgrade an existing Quasar v1 project that was built with Vue 2.6 to Vue 2.7, attempting to get rid of @vue/composition-api.

As soon as i step into the component containing vue-echarts i get the following warnings and errors in the console:

[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Error in setup: "TypeError: Cannot read properties of null (reading 'proxy')"

found in

---> <Echarts>
       <QPage>
         <HelloWorld> at src/pages/Index.vue
           <QPageContainer>
             <QLayout>
               <MainLayout> at src/layouts/MainLayout.vue
                 <App> at src/App.vue
                   <Root>
TypeError: Cannot read properties of null (reading 'proxy')
    at setup (index.esm.min.js:1:1)
    at invokeWithErrorHandling (vue.runtime.esm.js:3017:1)
    at initSetup (vue.runtime.esm.js:2440:1)
    at initState (vue.runtime.esm.js:5365:1)
    at Vue._init (vue.runtime.esm.js:5691:1)
    at new VueComponent (vue.runtime.esm.js:5826:1)
    at createComponentInstanceForVnode (vue.runtime.esm.js:4544:1)
    at init (vue.runtime.esm.js:4406:1)
    at createComponent (vue.runtime.esm.js:6567:1)
    at createElm (vue.runtime.esm.js:6521:1)
[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]: Error in render: "TypeError: Cannot read properties of null (reading '$vnode')"

found in

---> <Echarts>
       <QPage>
         <HelloWorld> at src/pages/Index.vue
           <QPageContainer>
             <QLayout>
               <MainLayout> at src/layouts/MainLayout.vue
                 <App> at src/App.vue
                   <Root>
Type.runtime.esm.js:3049 TypeError: Cannot read properties of null (reading '$vnode')
    at _createElement (vue.runtime.common.dev.js:2806:1)
    at createElement$1 (vue.runtime.common.dev.js:2771:1)
    at h (vue.runtime.common.dev.js:2884:1)
    at Proxy.render (index.esm.min.js:1:1)
    at Vue._render (vue.runtime.esm.js:2684:1)
    at VueComponent.updateComponent (vue.runtime.esm.js:3875:1)
    at Watcher.get (vue.runtime.esm.js:3446:1)
    at new Watcher (vue.runtime.esm.js:3436:1)
    at mountComponent (vue.runtime.esm.js:3892:1)
    at Vue.$mount (vue.runtime.esm.js:8772:1)

I tried to debug it but i'm not so inside the internals of vue-demi to understand what's wrong with that.

To exclude possible issues with my original project, i tested on a newly created Quasar v1 project (which is linked for reproduction).

Any idea of what can be the culprit?

Reproduction

https://github.com/uwburn/vue-echarts-quasar

[Justineo]

I suspect your might be importing vue from two different locations.

Try this: https://github.com/ecomfe/vue-echarts/issues/644#issuecomment-1211434054

[uwburn]

Thanks a lot for support, it works.

For future reference on how to fix on Quasar v1, an additional line should be added on the chainWebpack handler inside of quasar.conf.js:

chainWebpack (chain) {
  chain.plugin('eslint-webpack-plugin')
    .use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }]);

  // Add this workaround to solve issues with vue-echarts
  chain.resolve.alias.set("vue", path.resolve('./node_modules/vue/dist/vue.runtime.esm.js'));
}