I have a nuxt2 project running nuxt-bridge (hence more or less compatible with the composition api and its syntax).
We are starting to migrate to Vue3, for that, we started taking our atoms (exactly as they were) and moving them to a package of our monorepo, and added storybook for proper documentation.
Since nuxt-bridge supports the composition api and script setup, we thought about just using this separate package as a "folder" with an alias and importing the components from there as if they were in our package without building them or anything. So that we could keep documenting and organizing them aswell as deploying a storybook site for our non-tech team.
The issue is that, once we have modules installed in the vue3-storybook package nuxt2/webpack/vue-loader struggle to resolve the components properly.
We traced the issue down to vue-loader after trying several different things like ignoring with webpack some context's and resources to try and still treat this as a folder (that it actually is)
What vue-loader seems to be doing (not really sure because I don't know the internals) is that it resolves the component at target considering the package's node_modules and when then resolving in our nuxt2 application it is unable to resolve some imports and dependencies from the component we import.
We managed to burn it down to a simple warning like:
[friendly-errors 12:36:40 PM] WARN in ../ui-components/src/components/UiChip.vue?vue&type=script&setup=true&lang=ts
"export 'defineComponent' (imported as '_defineComponent') was not found in 'vue' friendly-errors 12:36:40 PM
Worth mentioning again, that removing the node_modules folder causes everything to automatically work.
I have a nuxt2 project running nuxt-bridge (hence more or less compatible with the composition api and its syntax).
We are starting to migrate to Vue3, for that, we started taking our atoms (exactly as they were) and moving them to a package of our monorepo, and added storybook for proper documentation.
Since nuxt-bridge supports the composition api and script setup, we thought about just using this separate package as a "folder" with an alias and importing the components from there as if they were in our package without building them or anything. So that we could keep documenting and organizing them aswell as deploying a storybook site for our non-tech team.
The issue is that, once we have modules installed in the vue3-storybook package nuxt2/webpack/vue-loader struggle to resolve the components properly.
We traced the issue down to vue-loader after trying several different things like ignoring with webpack some context's and resources to try and still treat this as a folder (that it actually is)
What vue-loader seems to be doing (not really sure because I don't know the internals) is that it resolves the component at target considering the package's node_modules and when then resolving in our nuxt2 application it is unable to resolve some imports and dependencies from the component we import.
We managed to burn it down to a simple warning like:
Worth mentioning again, that removing the node_modules folder causes everything to automatically work.
Thanks for your time in advanced :)