TypeError: Unknown file extension ".svelte" when testing component using shared package with indirect bits-ui dependency

[LeoDoby]

Hello, I'm encountering the following error when running tests in project1 for a component that imports another component from a local shared package (package/):

TypeError: Unknown file extension ".svelte" for C:\Users\user\WebstormProjects\project1\node_modules\bits-ui\dist\bits\utilities\portal\portal.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:219:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:245:36)
    at defaultLoad (node:internal/modules/esm/load:120:22)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:514:32)

/
│
├── package/
│   └── my-shared-component/       # Uses bits-ui internally
│       └── CardWrapper.svelte     # This uses bits-ui components
│
├── project1/
│   └── src/routes/page.svelte     # Imports CardWrapper from package/ (work perfectly)
│   └── tests/page.test.ts         # Crashes here
│
└── bits-ui/ (installed in package/, NOT in project1/)

[mcous]

Hi @LeoDoby, this seems like some sort of misconfiguration issue with your monorepo. I can't tell what tools you're using, but a good first step would be to make sure all your package.json files properly spec their internal workspace dependencies, since it seems like whatever Svelte compiler toolchain you're using isn't picking up that bits-ui needs to be compiled.

Are you able to share a complete, minimal repository showing the issue?