Skip to content

Bug Report: storybook-addon-playground is not working with React 19 #67

@ramon-julia

Description

@ramon-julia

Description

After upgrading to React 19, storybook-addon-playground no longer works.
In the Storybook UI, the addon shows the following message:

This addon has errors
Check your browser logs and addon code to pinpoint what went wrong.
This issue was not caused by Storybook.

Error Output

Browser console:

  componentDidCatch @ globals-runtime.js:65830
  i.componentDidCatch.r.callback @ globals-runtime.js:3770
  sh @ globals-runtime.js:3199
  kk @ globals-runtime.js:5030
  ik @ globals-runtime.js:5006
  hk @ globals-runtime.js:4988
  Wk @ globals-runtime.js:5607
  Pk @ globals-runtime.js:5582
  Gk @ globals-runtime.js:5263
  J @ globals-runtime.js:366
  R @ globals-runtime.js:393

Storybook environment:

"dependencies": {
  "@joshwooding/vite-plugin-react-docgen-typescript": "^0.6.2",
  "@react-docgen/cli": "^3.0.4",
  "@reduxjs/toolkit": "^2.9.0",
  "@storybook/react": "^9.1.12",
  "react": "^19.2.0",
  "react-docgen": "^8.0.2",
  "react-dom": "^19.2.0",
  "react-redux": "^9.2.0",
  "storybook-addon-react-docgen": "^1.2.44"
},
"devDependencies": {
  "@chromatic-com/storybook": "4.0.1",
  "@eslint/js": "^9.30.1",
  "@storybook/addon-docs": "^9.1.5",
  "@storybook/addon-vitest": "^9.1.5",
  "@storybook/react-vite": "^9.1.5",
  "@types/react": "^19.2.2",
  "@types/react-dom": "^19.2.2",
  "@vitejs/plugin-react": "^4.6.0",
  "@vitest/browser": "^3.2.4",
  "@vitest/coverage-v8": "^3.2.4",
  "eslint": "^9.30.1",
  "eslint-plugin-react": "^7.34.1",
  "eslint-plugin-react-hooks": "^5.2.0",
  "eslint-plugin-react-refresh": "^0.4.20",
  "eslint-plugin-storybook": "^9.1.5",
  "globals": "^16.3.0",
  "msw": "^2.3.0",
  "msw-storybook-addon": "^2.0.5",
  "playwright": "^1.54.1",
  "react-docgen-typescript": "^2.2.2",
  "react-docgen-typescript-plugin": "^1.0.8",
  "storybook": "^9.1.5",
  "storybook-addon-playground": "^3.0.0",
  "typescript": "~5.8.3",
  "typescript-eslint": "^8.35.1",
  "vite": "^7.0.4",
  "vitest": "^3.2.4"
},

Steps to Reproduce

  1. Create a new React app with React 19.
  2. Install Storybook and storybook-addon-playground.
  3. Start Storybook.
  4. Open a story with the Playground panel enabled.

Result: The addon panel fails to render with the above error and displays "This addon has errors".

Expected Behavior

The addon should render successfully and continue to function as it did in React 18.2.

Additional Context

From the error and stack trace, it looks like the addon might rely on APIs deprecated or changed in React 19. It may need updates to work with the latest React release.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions