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'
    ]
}

CodePudding user response：

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

CodePudding user response：

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.