"createElement() has been called outside of render function" when used inside wrapper

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

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

vue-start-template-web@0.1.0 /Users/jclaessens/dev/projects/xxx/npmpackages/vue-start-template-web
├─┬ bm-echarts@0.0.1 extraneous -> /Users/jclaessens/dev/projects/xxx/npmpackages/bm-echarts
│ ├─┬ @vue/composition-api@1.0.3 extraneous
│ │ └── vue@2.6.14 extraneous
│ ├── echarts@5.1.2 extraneous
│ └─┬ vue-echarts@6.0.0-rc.6 extraneous
│   ├── echarts@5.1.2 deduped
│   ├─┬ vue-demi@0.9.1 extraneous
│   │ └── vue@2.6.14 deduped
│   └── vue@2.6.14 deduped
├─┬ bm-web-core@2.4.0
│ └── vue@2.6.14 deduped
└── vue@2.6.14

Details

Our company wraps all external libraries to provide an internal stable & reusable api. Vue-Echarts is working when I use it directly, but as soon as I add a wrapper around it, it throws the following:

[Vue warn]: createElement() has been called outside of render function..

Our web template doesn’t use @vue/composition-api, so I suspect it has something to do with that, but I don’t have any experience with the composition api yet. We do want to use the latest e-charts lib so we would like to use the latest vue-echarts library as well.

Reproduction (didn’t know how to replicate this in a CodeSandbox)

1. Take the SFC example for Vue2, put it in echarts.vue file.
2. Create a seperate npm module with following dependencies:

"@vue/composition-api": "^1.0.3",
"echarts": "^5.1.2",
"vue-echarts": "^6.0.0-rc.6"

1. export that component in an index.js file with export { default } from './echarts';
2. use npm link to use it in a vue2 project
3. use that component
4. See console error on page load

Reproduction

/

[Justineo]

The same error occurs in nuxt.js

Try this:

Install @nuxtjs/composition-api and add '@nuxtjs/composition-api/module' to the buildModules array in nuxt.config.js.

[morinooji]

I’m using nuxt, and I’ve spent a lot of time on this issue. And, I solved it by adding the settings below.

• “vue”: “^2.6.14”,
• “vue-server-renderer”: “^2.6.14”,
• “vue-template-compiler”: “^2.6.14”,
• “nuxt”: “^2.15.3”,
• “echarts”: “^5.4.0”,
• “vue-echarts”: “^6.2.3”

add below to nuxt.config.js

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

I hope it helps someone.

@Justineo, you saved my life. https://github.com/ecomfe/vue-echarts/issues/644#issuecomment-1211434054