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	:heavy_check_mark: (Except Chat Story: Tried to access LayoutContext context outside a LayoutContextProvider provider.)
2.6.0	:heavy_check_mark: (-"-)
2.6.2	:heavy_check_mark: ("-")
2.6.3	:heavy_check_mark: ("-")
2.6.4	:x: (q is not defined)
2.6.5	:x: (q is not defined)
2.6.10	:x:

---

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 https://github.com/livekit/node-sdks/issues/357? We could then check again and see if it fixes Storybook as well.

[lukasIO]

sorry for the delay on this. We currently don't have the capacity to prioritise the storybook module in this repo. I'm more inclined to remove it entirely than to fix it at this point. There are some changes in the pipeline that would make storybook pretty much redundant