[Bug?]: Can't run Storybook on latest release

[JrobT]

What's not working?

I'm trying to run Storybook via yarn rw sb after upgrading to RedwoodJS v8.2, and I keep hitting errors.

The related storybook packages are:

    "@redwoodjs/auth-supabase-web": "8.2.0",
    "@redwoodjs/forms": "8.2.0",
    "@redwoodjs/router": "8.2.0",
    "@redwoodjs/web": "8.2.0",
...
    "@redwoodjs/cli-storybook-vite": "8.2.0",
    "@redwoodjs/vite": "8.2.0",
    "@storybook/addon-a11y": "8.3.2",
    "@storybook/addon-actions": "8.3.2",
    "@storybook/addon-interactions": "8.3.2",
    "@storybook/addon-links": "8.3.2",
    "@storybook/addons": "8.3.2",
    "@storybook/icons": "1.2.9",
    "@storybook/react": "8.3.2",
    "@storybook/theming": "8.3.2",

I've tried deleting the .storybook folder and allowing the command to re-create the files, and that didn't work. Running yarn rw sb just gives:

info => Starting manager..
info => Starting preview..
╭─────────────────────────────────────────────────────────────────────╮                                         18:29:10
│                                                                     │
│   Storybook 7.6.17 for storybook-framework-redwoodjs-vite started   │
│   157 ms for manager and 443 ms for preview                         │
│                                                                     │
│    Local:            http://localhost:7910/                         │
│    On your network:  http://192.168.1.155:7910/                     │
│                                                                     │
╰─────────────────────────────────────────────────────────────────────╯
✘ [ERROR] Could not resolve "storybook/internal/preview-api"

    ../node_modules/@storybook/react/dist/index.mjs:5:163:
      5 │ ..., composeStory as composeStory$1, composeStories as composeStories$1 } from 'storybook/internal/preview-api';
        ╵                                                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "storybook/internal/preview-api" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Missing "./dist/react-18" specifier in "@storybook/react-dom-shim" package [plugin vite:dep-pre-bundle]

    ../node_modules/@storybook/react/dist/chunk-OOL6AVF7.mjs:8:2157:
      8 │ ...derElement,unmountElement}=await import('@storybook/react-dom-shim'),Story=unboundStoryFn,content=getReact..

How do we reproduce the bug?

No response

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[Josh-Walker-GM]

Thanks @JrobT!

@arimendelow Are you able to take a look at this one and see if anything jumps to your mind?

[arimendelow]

Huh, this is odd — I just did a sanity check of creating a new project and testing it out, but ran into no issues.

I believe we need more info — @JrobT:

• Can you share the full contents of both your main and web package.json?
• A repo that this issue is reproduced in would also be extremely helpful

[JrobT]

Hi. I've been able to get my teammate to reproduce it.

Web package.json:

{
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "defaults",
      "not IE 11",
      "not IE_Mob 11"
    ]
  },
  "dependencies": {
    "@datadog/browser-logs": "5.26.0",
    "@fortawesome/fontawesome-svg-core": "6.6.0",
    "@fortawesome/free-regular-svg-icons": "6.6.0",
    "@fortawesome/react-fontawesome": "0.2.0",
    "@nivo/bar": "0.87.0",
    "@nivo/line": "0.87.0",
    "@radix-ui/react-accordion": "1.2.0",
    "@radix-ui/react-avatar": "1.1.0",
    "@radix-ui/react-checkbox": "1.1.1",
    "@radix-ui/react-dropdown-menu": "2.1.1",
    "@radix-ui/react-hover-card": "1.1.1",
    "@radix-ui/react-icons": "1.3.0",
    "@radix-ui/react-label": "2.1.0",
    "@radix-ui/react-navigation-menu": "1.2.0",
    "@radix-ui/react-popover": "1.1.1",
    "@radix-ui/react-select": "2.1.1",
    "@radix-ui/react-slot": "1.1.0",
    "@radix-ui/react-tabs": "1.1.0",
    "@radix-ui/react-tooltip": "1.1.2",
    "@redwoodjs/auth-supabase-web": "8.2.0",
    "@redwoodjs/forms": "8.2.0",
    "@redwoodjs/router": "8.2.0",
    "@redwoodjs/web": "8.2.0",
    "@tailwindcss/typography": "0.5.13",
    "@tanstack/react-table": "8.20.1",
    "@types/react-csv": "1.1.10",
    "bad-words": "3.0.4",
    "browser-image-compression": "2.0.2",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.1",
    "lucide-react": "0.424.0",
    "mermaid": "11.1.0",
    "papaparse": "5.4.1",
    "react": "18.3.1",
    "react-csv": "2.2.2",
    "react-day-picker": "8.10.1",
    "react-dom": "18.3.1",
    "react-hotjar": "6.3.1",
    "react-markdown": "9.0.1",
    "rehype-katex": "7.0.0",
    "rehype-raw": "7.0.0",
    "remark-gfm": "4.0.0",
    "remark-math": "6.0.0",
    "shepherd.js": "13.0.1",
    "tailwind-merge": "2.5.1",
    "tailwindcss-animate": "1.0.7",
    "vite-plugin-html": "3.2.2"
  },
  "devDependencies": {
    "@redwoodjs/cli-storybook-vite": "8.2.0",
    "@redwoodjs/vite": "8.2.0",
    "@storybook/addon-a11y": "8.3.2",
    "@storybook/addon-actions": "8.3.2",
    "@storybook/addon-interactions": "8.3.2",
    "@storybook/addon-links": "8.3.2",
    "@storybook/addons": "8.3.2",
    "@storybook/icons": "1.2.9",
    "@storybook/react": "8.3.2",
    "@storybook/theming": "8.3.2",
    "@testing-library/jest-dom": "6.5.0",
    "@types/bad-words": "3.0.3",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@types/storybook__react": "5.2.1",
    "autoprefixer": "10.4.18",
    "postcss": "8.4.38",
    "postcss-loader": "8.1.1",
    "tailwindcss": "3.4.3"
  },
  "name": "web",
  "private": true,
  "version": "0.0.0"
}

main package.json:

{
  "dependencies": {
    "@mailchimp/mailchimp_marketing": "3.0.80",
    "@stripe/stripe-js": "4.1.0",
    "@supabase/supabase-js": "2.44.2",
    "date-fns": "3.6.0",
    "node-fetch": "3.3.2"
  },
  "devDependencies": {
    "@redwoodjs/auth-supabase-setup": "8.2.0",
    "@redwoodjs/cli-data-migrate": "8.2.0",
    "@redwoodjs/core": "8.2.0",
    "@redwoodjs/eslint-config": "8.2.0",
    "@types/jest": "29.5.12",
    "eslint-plugin-prettier": "5.2.1",
    "jest-watch-typeahead": "2.2.2",
    "prettier": "3.3.2",
    "prettier-plugin-tailwindcss": "0.6.5",
    "typescript": "5.5.4"
  },
  "engines": {
    "node": ">=v20.0.0"
  },
  "eslintConfig": {
    "extends": "@redwoodjs/eslint-config",
    "root": true,
    "rules": {
      "no-duplicate-imports": "error",
      "no-multiple-empty-lines": "error",
      "object-shorthand": "error",
      "react/jsx-key": "error"
    }
  },
  "packageManager": "[email protected]",
  "prisma": {
    "seed": "yarn rw exec seed"
  },
  "private": true,
  "scripts": {
    "db:generate": "yarn rw prisma generate",
    "db:pull": "yarn rw prisma db pull",
    "db:reset": "yarn rw prisma db push --force-reset --accept-data-loss",
    "docker:down": "docker-compose down",
    "docker:up": "docker-compose up -d",
    "format": "eslint --ext .js,jsx,.ts,.tsx --fix --max-warnings 0 . && prettier --write \"(api|web)/src/**/*.{js,jsx,ts,tsx}\" --log-level warn && yarn rw prisma format",
    "lint": "eslint --ext .js,jsx,.ts,.tsx . && prettier --check \"(api|web)/src/**/*.{js,jsx,ts,tsx}\" --log-level warn",
    "test": "yarn docker:up && dotenv -e .env.test yarn rw test --detectOpenHandles --forceExit --openHandlesTimeout=0 && yarn docker:down"
  },
  "workspaces": {
    "packages": [
      "api",
      "web"
    ]
  }
}

[JrobT]

I think I've fixed this by uninstalling the @types/storybook__react package. It now runs for me.

My web package.json now looks like this:

{
  "browserslist": {
    "development": [
      "last 1 version"
    ],
    "production": [
      "defaults",
      "not IE 11",
      "not IE_Mob 11"
    ]
  },
  "dependencies": {
    "@datadog/browser-logs": "5.27.0",
    "@fortawesome/fontawesome-svg-core": "6.6.0",
    "@fortawesome/free-regular-svg-icons": "6.6.0",
    "@fortawesome/react-fontawesome": "0.2.0",
    "@nivo/bar": "0.87.0",
    "@nivo/line": "0.87.0",
    "@radix-ui/react-accordion": "1.2.0",
    "@radix-ui/react-avatar": "1.1.0",
    "@radix-ui/react-checkbox": "1.1.1",
    "@radix-ui/react-dropdown-menu": "2.1.1",
    "@radix-ui/react-hover-card": "1.1.1",
    "@radix-ui/react-icons": "1.3.0",
    "@radix-ui/react-label": "2.1.0",
    "@radix-ui/react-navigation-menu": "1.2.0",
    "@radix-ui/react-popover": "1.1.1",
    "@radix-ui/react-select": "2.1.1",
    "@radix-ui/react-slot": "1.1.0",
    "@radix-ui/react-tabs": "1.1.0",
    "@radix-ui/react-tooltip": "1.1.2",
    "@redwoodjs/auth-supabase-web": "8.2.0",
    "@redwoodjs/forms": "8.2.0",
    "@redwoodjs/router": "8.2.0",
    "@redwoodjs/web": "8.2.0",
    "@tailwindcss/typography": "0.5.13",
    "@tanstack/react-table": "8.20.1",
    "@types/react-csv": "1.1.10",
    "bad-words": "3.0.4",
    "browser-image-compression": "2.0.2",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.1",
    "lucide-react": "0.445.0",
    "mermaid": "11.2.1",
    "papaparse": "5.4.1",
    "react": "18.3.1",
    "react-csv": "2.2.2",
    "react-day-picker": "8.10.1",
    "react-dom": "18.3.1",
    "react-hotjar": "6.3.1",
    "react-markdown": "9.0.1",
    "rehype-katex": "7.0.0",
    "rehype-raw": "7.0.0",
    "remark-gfm": "4.0.0",
    "remark-math": "6.0.0",
    "shepherd.js": "13.0.1",
    "tailwind-merge": "2.5.1",
    "tailwindcss-animate": "1.0.7",
    "vite-plugin-html": "3.2.2"
  },
  "devDependencies": {
    "@redwoodjs/cli-storybook-vite": "8.2.0",
    "@redwoodjs/vite": "8.2.0",
    "@testing-library/jest-dom": "6.5.0",
    "@types/bad-words": "3.0.3",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "autoprefixer": "10.4.18",
    "postcss": "8.4.38",
    "postcss-loader": "8.1.1",
    "tailwindcss": "3.4.3"
  },
  "name": "web",
  "private": true,
  "version": "0.0.0"
}

[arimendelow]

Oh, interesting!! How'd you figure out that was the issue? Looks like it was deprecated a few Storybook majors ago, so it makes sense it was causing issues :)

[JrobT]

Oh, interesting!! How'd you figure out that was the issue? Looks like it was deprecated a few Storybook majors ago, so it makes sense it was causing issues :)

I was just clearing out the storybook packages in the hope that pulling it back to the redwood default packages would fix it. I must have missed that one the first time. Didn't realise we had it. Thanks for the responses and help.

[michalgm]

This is very unlikely to be your problem, but in case anyone else stumbles here like I did, I had a similar issue. My redwood storybook couldn't load (was 404ing on http://localhost:7910/sb-addons/essentials-toolbars-4/manager-bundle.js - and in fact was not even creating the web/node_modules/.cache/storybook/public/ directory).
It turned out that the issue was @million/lint (a fancy react render tracker that i was trying out) in my web/vite.config.js - i didn't even have the plugin enabled, just the import was enough to break it.

I've filed an issue with million: aidenybai/million#1163