Vue 3 + Bootstrap 5 + ZingChart does not work

Problem:
I'm getting the following error in the console:

main.js:11 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. For more details, see https://link.vuejs.org/feature-flags. main.js:14 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at at > at at main.js:14 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at at > at at zingchartVue3.cjs.min.js:26 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'style') at m (zingchartVue3.cjs.min.js:26:533219) at zingchartVue3.cjs.min.js:26:533602 at runtime-core.esm-bundler.js:2675:88 at callWithErrorHandling (runtime-core.esm-bundler.js:158:18) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2655:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:370:41) at flushJobs (runtime-core.esm-bundler.js:408:5)

Solution:

In this demo, we tested ZingChart with Vue 3 and bootstrap 5 and everything works perfectly fine. The "select date" button in the top right corner of the app is styled with bootstrap 5 classes. To run the app, you need to install dependencies with npm install and npm run dev to see the app in the browser.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us