Module '"*.svelte"' has no exported member

[tzezar]

Describe the bug

tsc --watch --noEmit raise bunch of errors

Reproduction

Clean installation from documentation

Logs

src/lib/components/ui/toggle/index.ts:3:2 - error TS2614: Module '"*.svelte"' has no exported member 'toggleVariants'. Did you mean to use 'import toggleVariants from "*.svelte"' instead?

3  toggleVariants,
   ~~~~~~~~~~~~~~

src/lib/components/ui/toggle/index.ts:4:7 - error TS2614: Module '"*.svelte"' has no exported member 'ToggleSize'. Did you mean to use 'import ToggleSize from "*.svelte"' instead?

4  type ToggleSize,
        ~~~~~~~~~~

src/lib/components/ui/toggle/index.ts:5:7 - error TS2614: Module '"*.svelte"' has no exported member 'ToggleVariant'. Did you mean to use 'import ToggleVariant from "*.svelte"' instead?

5  type ToggleVariant,
        ~~~~~~~~~~~~~

src/lib/components/ui/toggle/index.ts:6:7 - error TS2614: Module '"*.svelte"' has no exported member 'ToggleVariants'. Did you mean to use 'import ToggleVariants from "*.svelte"' instead?

6  type ToggleVariants,
        ~~~~~~~~~~~~~~

[01:45:13] Found 14 errors. Watching for file changes.

System Info

System:
    OS: Windows 10 10.0.19045        
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400F
    Memory: 16.03 GB / 31.86 GB      
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.68)

Severity

annoyance

[ieedan]

Can you share a reproduction?

[tzezar]

Best I can do is to share reproduction steps. Dunno how to make that on any playground.

PS F:\shadcn-svelte> npx sv create my-app     

┌  Welcome to the Svelte CLI! (v0.6.1)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint, tailwindcss, mdsvex
│
◇  tailwindcss: Which plugins would you like to add?
│  typography
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◆  Successfully setup add-ons
│
◇  Successfully installed dependencies
│
◇  Successfully formatted modified files
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-app                                                            │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: npm run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

PS F:\shadcn-svelte> cd .\my-app\

npx shadcn-svelte@next init

PS F:\shadcn-svelte\my-app>
 *  History restored 

┌   shadcn-svelte  v1.0.0-next.1 
│
◇  Which style would you like to use?
│  New York
│
◇  Which base color would you like to use?
│  Zinc
│
◇  Where is your global CSS file? (this file will be overwritten)
│  src\app.css
│
◇  Where is your Tailwind config located? (this file will be overwritten)
│  tailwind.config.ts
│
◇  Configure the import alias for components:
│  $lib/components
│
◇  Configure the import alias for utils:
│  $lib/utils
│
◇  Configure the import alias for hooks:
│  $lib/hooks
│
◇  Configure the import alias for ui:
│  $lib/components/ui
│
◇  Config file components.json created
│
◇  Project initialized
│
◇  Dependencies installed with npm
│
└  Success! Project initialization completed.

npx  shadcn-svelte@next add

◇  Which components would you like to install?
│  accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel,   
checkbox, collapsible, command, context-menu, data-table, dialog, drawer, dropdown-menu, form, hover-card,      
input, input-otp, label, menubar, pagination, popover, progress, radio-group, range-calendar, resizable,        
scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, switch, table, tabs, textarea, toggle,toggle-group, tooltip
│
◇  Ready to install components and dependencies?
│  Yes
│
◇  accordion installed at src\lib\components\ui\accordion
│
◇  alert installed at src\lib\components\ui\alert
│
◇  alert-dialog installed at src\lib\components\ui\alert-dialog
│
◇  aspect-ratio installed at src\lib\components\ui\aspect-ratio
│
◇  avatar installed at src\lib\components\ui\avatar
│
◇  badge installed at src\lib\components\ui\badge
│
◇  breadcrumb installed at src\lib\components\ui\breadcrumb
│
◇  button installed at src\lib\components\ui\button
│
◇  calendar installed at src\lib\components\ui\calendar
│
◇  card installed at src\lib\components\ui\card
│
◇  carousel installed at src\lib\components\ui\carousel
│
◇  checkbox installed at src\lib\components\ui\checkbox
│
◇  collapsible installed at src\lib\components\ui\collapsible
│
◇  command installed at src\lib\components\ui\command
│
◇  context-menu installed at src\lib\components\ui\context-menu
│
◇  data-table installed at src\lib\components\ui\data-table
│
◇  dialog installed at src\lib\components\ui\dialog
│
◇  drawer installed at src\lib\components\ui\drawer
│
◇  dropdown-menu installed at src\lib\components\ui\dropdown-menu
│
◇  hover-card installed at src\lib\components\ui\hover-card
│
◇  input installed at src\lib\components\ui\input
│
◇  form installed at src\lib\components\ui\form
│
◇  input-otp installed at src\lib\components\ui\input-otp
│
◇  label installed at src\lib\components\ui\label
│
◇  menubar installed at src\lib\components\ui\menubar
│
◇  pagination installed at src\lib\components\ui\pagination
│
◇  popover installed at src\lib\components\ui\popover
│
◇  progress installed at src\lib\components\ui\progress
│
◇  radio-group installed at src\lib\components\ui\radio-group
│
◇  range-calendar installed at src\lib\components\ui\range-calendar
│
◇  resizable installed at src\lib\components\ui\resizable
│
◇  scroll-area installed at src\lib\components\ui\scroll-area
│
◇  select installed at src\lib\components\ui\select
│
◇  separator installed at src\lib\components\ui\separator
│
◇  sheet installed at src\lib\components\ui\sheet
│
◇  sidebar installed at src\lib\components\ui\sidebar
│
◇  skeleton installed at src\lib\components\ui\skeleton
│
◇  slider installed at src\lib\components\ui\slider
│
◇  sonner installed at src\lib\components\ui\sonner
│
◇  switch installed at src\lib\components\ui\switch
│
◇  table installed at src\lib\components\ui\table
│
◇  tabs installed at src\lib\components\ui\tabs
│
◇  textarea installed at src\lib\components\ui\textarea
│
◇  toggle installed at src\lib\components\ui\toggle
│
◇  toggle-group installed at src\lib\components\ui\toggle-group
│
◇  tooltip installed at src\lib\components\ui\tooltip
│
◇  is-mobile installed at src\lib\hooks\is-mobile
│
◇  Dependencies installed with npm
│
◇  Config file components.json updated
│
└  Success! Component installation completed.

tsc --watch --noEmit

[01:56:25] Starting compilation in watch mode...

src/lib/components/ui/alert/index.ts:4:10 - error 
TS2614: Module '"*.svelte"' has no exported member 'alertVariants'. Did you mean to use 'import alertVariants from "*.svelte"' instead?

4 export { alertVariants, type AlertVariant } from "./alert.svelte";
           ~~~~~~~~~~~~~

src/lib/components/ui/alert/index.ts:4:30 - error 
TS2614: Module '"*.svelte"' has no exported member 'AlertVariant'. Did you mean to use 'import AlertVariant from "*.svelte"' instead?

4 export { alertVariants, type AlertVariant } from "./alert.svelte";
                               ~~~~~~~~~~~~       

src/lib/components/ui/badge/index.ts:2:10 - error 
TS2614: Module '"*.svelte"' has no exported member 'badgeVariants'. Did you mean to use 'import badgeVariants from "*.svelte"' instead?

2 export { badgeVariants, type BadgeVariant } from "./badge.svelte";
           ~~~~~~~~~~~~~

src/lib/components/ui/badge/index.ts:2:30 - error 
TS2614: Module '"*.svelte"' has no exported member 'BadgeVariant'. Did you mean to use 'import BadgeVariant from "*.svelte"' instead?

2 export { badgeVariants, type BadgeVariant } from "./badge.svelte";
                               ~~~~~~~~~~~~       

src/lib/components/ui/button/index.ts:2:7 - error 
TS2614: Module '"*.svelte"' has no exported member 'ButtonProps'. Did you mean to use 'import ButtonProps from "*.svelte"' instead?

2  type ButtonProps,
        ~~~~~~~~~~~

src/lib/components/ui/button/index.ts:3:7 - error 
TS2614: Module '"*.svelte"' has no exported member 'ButtonSize'. Did you mean to use 'import ButtonSize from "*.svelte"' instead?

3  type ButtonSize,
        ~~~~~~~~~~

src/lib/components/ui/button/index.ts:4:7 - error 
TS2614: Module '"*.svelte"' has no exported member 'ButtonVariant'. Did you mean to use 'import ButtonVariant from "*.svelte"' instead?

4  type ButtonVariant,
        ~~~~~~~~~~~~~

src/lib/components/ui/button/index.ts:5:2 - error 
TS2614: Module '"*.svelte"' has no exported member 'buttonVariants'. Did you mean to use 'import buttonVariants from "*.svelte"' instead?

5  buttonVariants,
   ~~~~~~~~~~~~~~

src/lib/components/ui/data-table/data-table.svelte.ts:7:8 - error TS2307: Cannot find module '@tanstack/table-core' or its corresponding type declarations.

7 } from "@tanstack/table-core";
         ~~~~~~~~~~~~~~~~~~~~~~

src/lib/components/ui/data-table/data-table.svelte.ts:55:21 - error TS7006: Parameter 'prev' implicitly has an 'any' type.

55   table.setOptions((prev) => {
                       ~~~~

src/lib/components/ui/toggle/index.ts:3:2 - error 
TS2614: Module '"*.svelte"' has no exported member 'toggleVariants'. Did you mean to use 'import toggleVariants from "*.svelte"' instead?

3  toggleVariants,
   ~~~~~~~~~~~~~~

src/lib/components/ui/toggle/index.ts:4:7 - error 
TS2614: Module '"*.svelte"' has no exported member 'ToggleSize'. Did you mean to use 'import ToggleSize from "*.svelte"' instead?

4  type ToggleSize,
        ~~~~~~~~~~

src/lib/components/ui/toggle/index.ts:5:7 - error 
TS2614: Module '"*.svelte"' has no exported member 'ToggleVariant'. Did you mean to use 'import ToggleVariant from "*.svelte"' instead?

5  type ToggleVariant,
        ~~~~~~~~~~~~~

src/lib/components/ui/toggle/index.ts:6:7 - error 
TS2614: Module '"*.svelte"' has no exported member 'ToggleVariants'. Did you mean to use 'import ToggleVariants from "*.svelte"' instead?

6  type ToggleVariants,
        ~~~~~~~~~~~~~~

[01:56:27] Found 14 errors. Watching for file changes.

[ieedan]

https://stackblitz.com/github/ieedan/shadcn-repro-template/tree/next

[ieedan]

you could also share the repo you are trying to this in or another repo

[tzezar]

you could also share the repo you are trying to this in or another repo

https://github.com/tzezar/repro

[ieedan]

From what I can tell with this repro everything is working fine. Is there a reason you would run tsc?

[tzezar]

From what I can tell with this repro everything is working fine. Is there a reason you would run tsc?

We use it to catch all ts error within project, especially those in unopened files.

as a workaround we used //@ts-nocheck in those files from shadcn-svelte that raise errors

[ieedan]

Okay I see what's going on but I will defer to @huntabyte on how to proceed.

Basically in the newer versions the shared code for the components is exported from within a *.svelte file from the <script lang="ts" module>. We could fix these errors by going back to the old way of doing this where we export everything from index.ts. However in cases where you import from the *.svelte file you would get errors because of circular dependencies.

Truthfully I never use tsc for any of my svelte projects. Normally the better way to go is to run svelte-check using the check script in your package.json when you created the project + linting rules if you are into that.

Also it's worth noting only a few components are effected by this:

• alert
• badge
• button
• toggle

[ieedan]

You could also fix this yourself by moving the contents of the <script lang="ts" module> tags in these components to the index.ts and then importing them from index.ts in the *.svelte component.

[huntabyte]

svelte-check is the recommended approach here for this exact reason 😁