The requested module '/node_modules/.vite/deps/vue.js?v=6a4bcc3c' does not provide an export named 'default'

[mawshin]

I am using vite for development and also to build production JS of components library. I am using vue3-apexcharts for one of the component and it works fine in the npm dev mode. If building the package for production, an error will be reported when using the library in the application:The requested module '/node_modules/.vite/deps/vue.js?v=6a4bcc3c' does not provide an export named 'default'.

Not sure if anyone has encounter this issue before but this would be the common way to import and use vue3-apexcharts:

import apexcharts from "vue3-apexcharts"

But the above will cause error when using the build JS and I have found to fix the issue will have to call the file within the src folder:

import apexcharts from "vue3-apexcharts/src/vue3-apexcharts"

Would be great if anyone knows if it could be a vite build issue or is it something on vue3-apexcharts end which might cause the vite build to have issue.

[amanpatel]

I am also having the same issue. It seems to be a problem with how the project is producing its distributable. Which is in the commonJS format instead of a ES build. Vite is a modern build tool and it has left behind things like commonJS in favor of the modern toolset. This is why you are having this issue.

Unfortunately for me, importing directly from vue3-apexcharts/src/vue3-apexcharts also does not work, so I'm looking at fixing this in another way.

[ShwaibLeBon]

Hey @mawshin and @amanpatel , you should include "vue3-apexcharts" in vite.config.ts' optimizeDeps option like so:

optimizeDeps: {
	include: ["vue3-apexcharts"],
},