Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Importing plain component file from separate monorepo package results in wrong build #2069

Open
dbssman opened this issue Mar 29, 2024 · 0 comments

Comments

@dbssman
Copy link

dbssman commented Mar 29, 2024

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.

Thanks for your time in advanced :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant