Vue 3 - Dynamic require of "highcharts" is not supported

[bryaan]

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

[bryaan]

I think this is an issue when using Vite...