Storybook is broken ("Gt is not defined" on all stories)

[Philzen]

Select which package(s) are affected

Mainly @storybook/react

Describe the bug

I wanted to explore the storybook to better understand the individual components, as i'm investigating into a migration of an existing app that had its components modeled after https://github.com/livekit/livekit-react – also i was hoping to find good approaches to improve our own stories for those components and possibly find a working simulateParticipants() example, as that method is barely documented and all initial tries with it failed.

So i tried both pnpm dev:storybook and also build:storybook, firing up a dev server to view docs/storybook/storybook-static/index.html with the latter.

The Storybook itself renders, but all stories show up like this

Reproduction

git clone [email protected]:livekit/components-js.git
cd components-js
pnpm install
pnpm dev:storybook

Wait until this box appears:

@livekit/component-docs-storybook:dev: ╭──────────────────────────────────────────────────────────────────────────────────────────╮
@livekit/component-docs-storybook:dev: │                                                                                          │
@livekit/component-docs-storybook:dev: │   Storybook 7.6.19 for react-vite started                                                │
@livekit/component-docs-storybook:dev: │   3.94 s for manager and 9.75 s for preview                                              │
@livekit/component-docs-storybook:dev: │                                                                                          │
@livekit/component-docs-storybook:dev: │    Local:            http://localhost:6006/                                              │
@livekit/component-docs-storybook:dev: │    On your network:  http://192.168.188.21:6006/                                         │
@livekit/component-docs-storybook:dev: │                                                                                          │
@livekit/component-docs-storybook:dev: │   A new version (8.4.7) is available!                                                    │
@livekit/component-docs-storybook:dev: │                                                                                          │
@livekit/component-docs-storybook:dev: │   Upgrade now: npx storybook@latest upgrade                                              │
@livekit/component-docs-storybook:dev: │                                                                                          │
@livekit/component-docs-storybook:dev: │   Read full changelog: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md   │
@livekit/component-docs-storybook:dev: │                                                                                          │
@livekit/component-docs-storybook:dev: ╰──────────────────────────────────────────────────────────────────────────────────────────╯

then open up a browser and go to http://localhost:6006/

Logs

No response

System Info

System:
    OS: Linux 6.12 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-2410M CPU @ 2.30GHz
    Memory: 3.05 GB / 7.64 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Binaries:
    Node: 20.7.0 - /run/user/1000/fnm_multishells/2019_1735143515825/bin/node
    npm: 10.1.0 - /run/user/1000/fnm_multishells/2019_1735143515825/bin/npm
    pnpm: 9.12.1 - /run/user/1000/fnm_multishells/2019_1735143515825/bin/pnpm
    bun: 1.1.42 - /usr/bin/bun
  Browsers:
    Chromium: 131.0.6778.204
  npmPackages:
    livekit-client: ^2.5.7 => 2.6.0

Severity

blocking an upgrade

Additional Information

No response

[Philzen]

I just tested with git co @livekit/[email protected] and can report that with that version the stories do render fine. Cross-checked with git co @livekit/[email protected] where they are broken, so it was one of the 2.6 patch releases that broke it.

Manual Bisect results:

Version	Works
2.5.0	✔️ (Except Chat Story: Tried to access LayoutContext context outside a LayoutContextProvider provider.)
2.6.0	✔️ (-"-)
2.6.2	✔️ ("-")
2.6.3	✔️ ("-")
2.6.4	❌ (q is not defined)
2.6.5	❌ (q is not defined)
2.6.10	❌

---

BTW – v.2.5.0 showed this sleek and practical "design" when running pnpm dev:storybook – would be great to keep that as it greatly increases visibility by subtask due to the vast amounts of log output:

[Philzen]

Manual Bisect results:
2.6.3 ✔️ ("-")
2.6.4 ❌ (q is not defined)

OK i could pin it down to commit 6ef4005 – if i revert that in my test setup stories render fine again. So, if we're lucky it's just adding in @storybook/builder-vite to make it work, will give it a go...

[Philzen]

I did try adding @storybook/builder-vite to no avail. But after some playing around with the build commands i could find that the underlying reason seems to be

[plugin:vite:import-analysis] Failed to resolve entry for package "@livekit/components-react". The package may have incorrect main/module/exports specified in its package.json.

And indeed, publint reports a couple of issues here: https://publint.dev/@livekit/[email protected]

@lukasIO i am again struggling with TSup to generate the necessary file (this time it's the .mts files) – do you think you could take over and fix the publint issues as you did for livekit/node-sdks#357? We could then check again and see if it fixes Storybook as well.