Unknown file extension ".svelte"

[jerrythomas]

Describe the bug

I am getting this error when I use vitest to test a component that depends on a library component.

I have a custom package @rokkit/ui that I have published on npm and I am getting this error when importing that custom component in a local component.

Example:

"exports": {
    "./src": "./src",
    "./package.json": "./package.json",
    "./utils": "./src/lib/index.js",
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./src/index.js",
      "svelte": "./src/index.js"
    }
  }

This is the exports section of the published library. src/index.js contains the code

export { default as Button } from './Button.svelte'

In a different project I have created an AuthButton component that uses this Button

import {Button} from '@rokkit/ui'

In my test file for this AuthButton.svelte using vitest I get the error

TypeError: Unknown file extension ".svelte" for /Users/Jerry/Developer/repro-svelte-import-error/node_modules/.pnpm/@[email protected]/node_modules/@rokkit/ui/src/Button.svelte

I changed the import to the following

import Button from '@rokkit/ui/src/Button.svelte'

This gave the error

Error: Missing "./src/Button.svelte" specifier in "@rokkit/ui" package
  Plugin: vite:import-analysis

So i modified the package .json in node_modules with the following updated exports

"exports": {
    "./src": "./src",
    "./src/Button.svelte": "./src/Button.svelte",
    "./package.json": "./package.json",
    "./utils": "./src/lib/index.js",
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./src/index.js",
      "svelte": "./src/index.js"
    }
  }

Adding the line "./src/Button.svelte": "./src/Button.svelte" solved the error temporarily. However, internal references to other components cause similar problems.

It seems like I am missing something. The entry "svelte": "./src/index.js" used to work previously.

Is there something else that is needed to make this work without having to enter every svelte file in the exports section?

Reproduction

https://github.com/jerrythomas/repro-svelte-import-error

Logs

pnpm test:watch

> [email protected] test:watch /Users/Jerry/Developer/repro-svelte-import-error
> vitest


 DEV  v3.1.3 /Users/Jerry/Developer/repro-svelte-import-error

 ✓ packages/ui/spec/EmailInput.spec.svelte.js (1 test) 88ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 2 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  packages/ui/spec/AuthButton.spec.svelte.js [ packages/ui/spec/AuthButton.spec.svelte.js ]
 FAIL  packages/ui/spec/index.spec.js [ packages/ui/spec/index.spec.js ]
TypeError: Unknown file extension ".svelte" for /Users/Jerry/Developer/repro-svelte-import-error/node_modules/.pnpm/@[email protected]/node_modules/@rokkit/ui/src/Button.svelte
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯


 Test Files  2 failed | 1 passed (3)
      Tests  1 passed (1)
   Start at  07:15:42
   Duration  740ms (transform 177ms, setup 0ms, collect 278ms, tests 88ms, environment 725ms, prepare 98ms)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

System Info

npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: macOS 15.4.1
    CPU: (16) arm64 Apple M4 Max
    Memory: 1.29 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.4.0 - ~/.nvm/versions/node/v23.4.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v23.4.0/bin/npm
    pnpm: 10.10.0 - /opt/homebrew/bin/pnpm
    bun: 1.2.12 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 135.0.7049.115
    Safari: 18.4
  npmPackages:
    svelte: ^5.28.2 => 5.28.2

Severity

blocking all usage of svelte

[jerrythomas]

Updated reproduction. https://github.com/jerrythomas/repro-svelte-import-error

[jerrythomas]

@Conduitry Is there anything else needed? I have provided the reproduction repo also.

[paoloricciuti]

If you look at the code shipped to npm there's no component there, just the types...also this exports are wrong because ./src is probably pointing at a directory and exports needs to be files...if you need help setting up the project feel free to join our discord but this is not a bug with svelte. Thanks for reporting tho. 🧡