Cannot read .vue files of external packages
Hi, I encountered a problem when registering a package's exported SFCs with a nuxt module:
Here is the reproduction; it's a pnpm monorepo. There is a
pkg package that simply exports a Test.vue component, and a nuxt-app that simply renders it. The Test component is registered with a module using addComponent.
Things to note:
- nuxt-app installs pkg with the file: protocol (pkg is packed with pnpm pack); if the workspace: protocol is used instead, the error is not thrown.
- If the nuxt app were located in the monorepo's root, or there were no monorepo, the error is not thrown. Here's also the reproduction of that.
Are there, perhaps, some vite configuration options that could fix this?StackBlitz
Read SFC - monorepo - StackBlitz
Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine
StackBlitz
Read SFC - regular repo - StackBlitz
Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine
2 Replies
Hi @8ctavio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It looks like Vite/Nuxt isn’t transforming .vue files when they come from an external package path (installed via file:), so Node tries to load them directly and errors on the unknown “.vue” extension. In Nuxt, third‑party SFCs should be registered through Nuxt’s component system so they’re compiled by Vite.
- Use a Nuxt module and register the component with addComponent so Nuxt auto‑imports and compiles it (avoid importing the .vue file directly at runtime). Example from the docs: addComponent({ name: 'MyAutoImportedComponent', filePath: 'my-npm-package' }) (you can target your package entry or a compiled export rather than a raw .vue path) (addComponent).
- If you maintain the external package, consider exposing components via a Nuxt module that calls addComponentsDir so consumers can load SFCs from node_modules while ensuring Nuxt compiles them (Library Authors).
- Alternatively, in the consuming app register components from an npm package via a local module using addComponent (same as above) (Custom directories → npm Packages). If you directly import a .vue file path from node_modules (especially via file: tarball), Nuxt/Vite may not treat it as a component entry and Node will hit the raw .vue file, causing the “Unknown file extension” error. The docs do not mention a specific Vite option for enabling raw .vue loading from external tarballs; they recommend registering components through addComponent/addComponentsDir so Nuxt’s pipeline compiles them. If this still fails only with file:, prefer workspace: during development or publish/install the package normally so Nuxt can resolve it through node_modules as expected. The knowledge sources do not explicitly cover a Vite config flag to fix file:-installed SFC paths. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- If you maintain the external package, consider exposing components via a Nuxt module that calls addComponentsDir so consumers can load SFCs from node_modules while ensuring Nuxt compiles them (Library Authors).
- Alternatively, in the consuming app register components from an npm package via a local module using addComponent (same as above) (Custom directories → npm Packages). If you directly import a .vue file path from node_modules (especially via file: tarball), Nuxt/Vite may not treat it as a component entry and Node will hit the raw .vue file, causing the “Unknown file extension” error. The docs do not mention a specific Vite option for enabling raw .vue loading from external tarballs; they recommend registering components through addComponent/addComponentsDir so Nuxt’s pipeline compiles them. If this still fails only with file:, prefer workspace: during development or publish/install the package normally so Nuxt can resolve it through node_modules as expected. The knowledge sources do not explicitly cover a Vite config flag to fix file:-installed SFC paths. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@538126631076626442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.