1

I am trying to include highcharts-vue like this:

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import HighchartsVue from "highcharts-vue";


const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(HighchartsVue);

app.mount('#app')

But I'm getting the error:

 Dynamic require of "highcharts" is not supported

package.json

{
  "name": "mwc-web",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 5050"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.4",
    "bootstrap": "^5.1.3",
    "bootstrap-vue-3": "^0.1.9",
    "highcharts": "^10.0.0",
    "highcharts-vue": "^1.4.0",
    "moment": "^2.29.1",
    "pinia": "^2.0.11",
    "vue": "^3.2.31",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.2",
    "@vue/cli-plugin-babel": "^5.0.4",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "vite": "^2.8.4"
  }
}

vite.config.js

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  optimizeDeps: {
    exclude: ['highcharts'],
  }
})

babel.config.js

module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ]
}
0

2 Answers 2

1

I think the cause of the issue is this config:

optimizeDeps: {
  exclude: ['highcharts'], // ❌ don't do this
}

The solution would be to remove highcharts from optimizeDeps.exclude.

Also, you don't need a Babel config when using Vite. That might be another source of the problem.

demo

1
  • Oh cool, that seemed to work. I was getting another error which is why I put that there, but now it's not coming up.
    – BAR
    Commented Apr 8, 2022 at 22:20
0

Here's a working example of vue3 + highcharts-vue: https://codesandbox.io/s/vue3-highcharts-example-k98kyz

Be sure to update to the latest versions, and to use babel or any other transpilers to work with ESM packages.

2
  • I added @vue/cli-plugin-babel but still same error. Does the example use vite? It doesn't seem like it.
    – BAR
    Commented Apr 8, 2022 at 18:40
  • I think this is an issue when using Vite...
    – BAR
    Commented Apr 8, 2022 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.