Error when adding highchartsjs to Vue3 app-CodePudding

I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:

✘ [ERROR] Could not resolve "highcharts"

    node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
      1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
        ╵                              ~~~~~~~~~~~~

  You can mark the path "highcharts" as external to exclude it from the bundle,
  which will remove this error. You can also surround this "require" call with a
  try/catch block to handle this failure at run-time instead of bundle-time.

I tried excluding it from bundle as suggested but it's not working:

vite.config.js

export default defineConfig({
  ...
  build: {
    rollupOptions: {
      external: ['highcharts'],
    }
  },
})

CodePudding user response：

This works:

export default defineConfig({
  ...
  optimizeDeps: {
    exclude: ['highcharts'],
  }
})

CodePudding user response：

Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.

The solution would be to install highcharts:

npm install -S highcharts

demo