Skip to content

bug: ReferenceError: FocusScope is not defined #1937

@TeemuKoivisto

Description

@TeemuKoivisto

Describe the bug

I just installed bits-ui & shadcn-svelte dialog with the default flow pnpm dlx shadcn-svelte@latest init and pnpm dlx shadcn-svelte@latest add dialog. And copy-pasted the example dialog which immediately crashes:

chunk-F34R5E6G.js?v=9a41b412:723 Uncaught ReferenceError: FocusScope is not defined

	in <unknown>
	in dialog-content.svelte
	in portal-consumer.svelte
	in undefined
	in portal.svelte
	in dialog.svelte
	in SearchModal.svelte
	in Sidebar.svelte
	in Layout.svelte
	in +page.svelte
	in +layout.svelte
	in +layout.svelte
	in +layout.svelte
	in root.svelte

    at add_svelte_meta.componentTag (bits-ui.js?v=d2db6fbc:24940:17)
    at add_svelte_meta (chunk-F34R5E6G.js?v=9a41b412:547:12)
    at consequent_2 (bits-ui.js?v=d2db6fbc:24939:9)
    at chunk-E2VIT5YR.js?v=9a41b412:655:24
    at update_reaction (chunk-F34R5E6G.js?v=9a41b412:3369:18)
    at update_effect (chunk-F34R5E6G.js?v=9a41b412:3494:21)
    at create_effect (chunk-F34R5E6G.js?v=9a41b412:2856:7)
    at branch (chunk-F34R5E6G.js?v=9a41b412:3032:10)
    at BranchManager.ensure (chunk-E2VIT5YR.js?v=9a41b412:655:11)
    at update_branch (chunk-E2VIT5YR.js?v=9a41b412:788:14)

I don't know what the heck is happening but a default installation should probably not implode like this. It seems to be happening from at least 2.15.0 onwards, downgrading further then apparently breaks the current code (PresenceLayer error or something) so I am bit baffled here what to do. I'll add a reproduction if necessary. The minimal dialog looks like this:

<script lang="ts">
  import { Dialog } from 'bits-ui'
</script>

<Dialog.Root>
  <Dialog.Trigger>
    Open
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay class="fixed inset-0 z-50 bg-black/80" />
    <Dialog.Content
      class="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-white p-6 shadow-lg"
    >
      <Dialog.Title class="text-lg font-semibold">Are you sure absolutely sure?</Dialog.Title>
      <Dialog.Description class="mt-2 text-sm text-gray-500">
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Reproduction

https://github.com/TeemuKoivisto/bug-bits-ui-focusscope-not-defined

Logs

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 112.78 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.18.0 - /Users/teemu/.nvm/versions/node/v22.18.0/bin/node
    npm: 10.9.3 - /Users/teemu/.nvm/versions/node/v22.18.0/bin/npm
    pnpm: 10.28.2 - /Users/teemu/.nvm/versions/node/v22.18.0/bin/pnpm
    bun: 1.3.4 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 144.0.7559.110
    Firefox: 146.0.1
    Safari: 18.6
  npmPackages:
    @sveltejs/kit: ^2.43.2 => 2.49.4 
    bits-ui: 2.15.0 => 2.15.0 
    svelte: ^5.39.5 => 5.46.3

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageA maintainer needs to review this issue and label it appropriately

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions