Vue 3 component library

[MechJosh0]

I'm trying to use heroicons in a Vue 3 component library. When importing the library into my main project it throws the following error in the browser:

my-library.esm.js:612 Uncaught TypeError: Cannot destructure property 'createVNode' of 'vue__WEBPACK_IMPORTED_MODULE_0__.default' as it is undefined.
    at Module../node_modules/my-library/dist/my-library.esm.js (my-library.js:612)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/main.ts (app.js:1173)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Object.1 (app.js:1569)
    at __webpack_require__ (bootstrap:853)
    at checkDeferredModules (bootstrap:45)
    at bootstrap:993

And the following error is thrown in the terminal:

"export 'default' (imported as 'require$$0') was not found in 'vue'

Obviously the error message is not very helpful in saying it's related to heroics, but I was able to narrow this down to be a heroicons issue by keeping everything else the same and just removing the heroicons imports and things work again.

Both the library and main projects are Vue v3.1.1, using heroicons/vue v1.0.1.

[MechJosh0]

Turns out this was due to rollup not being told heroicons is an external dependency. Typically there are warning messages regarding this problem but because vue was already listed as an external dependency for whatever reason it wasn't warning about heroicons.

https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency

const external = [
    "vue",
    "@heroicons/vue/outline",
    "@heroicons/vue/solid",
    ...
];