Vue 3 - Dynamic require of "highcharts" is not supported - vue.js

Question

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

Answer 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

Answer 2

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.