[Bug?]: Storybook doesn't work anymore

[razzeee]

What's not working?

Storybook with vite doesn't work

How do we reproduce the bug?

If I create a new repo via
yarn create redwood-app my-redwood-project
cd my-redwood-project
yarn
yarn rw storybook

it crashes with

[...]

Initializing the Mock Service Worker at "/home/user/dev/my-redwood-project/web/public"...

Service Worker successfully created!
/home/user/dev/my-redwood-project/web/public/mockServiceWorker.js

Continue by creating a mocking definition module in your application:

https://mswjs.io/docs/getting-started/mocks

Storybook's main.ts not found. Creating it now...
Successfully wrote file `./web/.storybook/main.ts`
main.ts created!
Storybook's preview-body.html not found. Creating it now...
Successfully wrote file `./web/.storybook/preview-body.html`
preview-body.html created!
@storybook/cli v7.6.17

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: storybook-framework-redwoodjs-vite/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Cannot find module '/home/user/dev/my-redwood-project/node_modules/storybook-framework-redwoodjs-vite/dist/plugins/auto-imports' imported from /home/user/dev/my-redwood-project/node_modules/storybook-framework-redwoodjs-vite/dist/preset.js
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:860:10)
    at defaultResolve (node:internal/modules/esm/resolve:984:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:685:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:634:25)
    at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:384:53)
    at new ModuleJobSync (node:internal/modules/esm/module_job:341:34)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:357:11)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1385:24)
    at Module._compile (node:internal/modules/cjs/loader:1536:5)
    at loadPreset (/home/user/dev/my-redwood-project/node_modules/@storybook/core-common/dist/index.js:15:82)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

What's your environment? (If it applies)

❯ yarn rw info

  System:
    OS: Linux 6.12 Fedora Linux 41 (Workstation Edition)
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.14.0 - /tmp/xfs-cdf663a5/node
    Yarn: 4.6.0 - /tmp/xfs-cdf663a5/yarn
  Databases:
    SQLite: 3.46.1 - /usr/bin/sqlite3
  npmPackages:
    @redwoodjs/cli-storybook-vite: 8.5.0 => 8.5.0 
    @redwoodjs/core: 8.5.0 => 8.5.0 
    @redwoodjs/project-config: 8.5.0 => 8.5.0 
  redwood.toml:
    [web]
      title = "Redwood App"
      port = 8910
      apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
      includeEnvironmentVariables = [
        # Add any ENV vars that should be available to the web side to this array
        # See https://redwoodjs.com/docs/environment-variables#web
      ]
    [api]
      port = 8911
    [browser]
      open = true
    [notifications]
      versionUpdates = ["latest"]

Are you interested in working on this?

• I'm interested in working on this

[razzeee]

Using node 20 seems to fix this.

But in our real problem, that causes us to run into Error [ERR_UNKNOWN_BUILTIN_MODULE]: No such built-in module: node:sqlite which could be due to another dependency, still investigating

[razzeee]

That seems to have been an inbetween error unjs/node-fetch-native#135

Killing the lockfile and recreating everything helped rm -rf node_modules package-lock.json yarn.lock

Now it's starting, but pretty much every imported *.mock.ts file seems unhappy.

3:02:13 PM [vite] Internal server error: /home/user/dev/project/web/src/components/MeetingRoomDeviceCell/MeetingRoomDeviceCell.mock.ts: Unexpected token, expected "," (8:15)

   6 |     macAddress: faker.internet.mac,
   7 |     calendarShort: 'Room name short',
>  8 |     panics: [] as unknown,
     |                ^
   9 |     batteryLevels: [...new Array(20)].map((_item, index) => {
  10 |       return {
  11 |         id: index,
  Plugin: storybook:react-docgen-plugin

[razzeee]

Seems to be caused by #11877 (comment) while https://docs.redwoodjs.com/docs/project-configuration-dev-test-build/#configuring-babel says it will be merged with the redwood babel config - I guess that's not true for the storybook config