Skip to content

Knobs & Backgrounds addons cause React hooks render error #2

Open

Description

@ArrayKnight

Describe the bug
Error message: "Rendered more hooks than during the previous render." displayed instead of stories

To Reproduce
Steps to reproduce the behavior:

  1. Setup Storybook with Knobs and/or Background addons registered
  2. Add a global decorator (even a basic empty div)
  3. Run Storybook
  4. See error

Expected behavior
Story works as expected

Screenshots
image

Code snippets
preview.tsx

import type { Story } from '@storybook/react'

export const decorators = [
    (Story: Story) => (
        <div>
            <Story />
        </div>
    ),
]

System
Environment Info:

System:
OS: Windows 10 10.0.19042
CPU: (16) x64 Intel(R) Core(TM) i9-10980HK CPU @ 2.40GHz
Binaries:
Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.114
Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
npmPackages:
@storybook/addon-essentials: ^6.2.2 => 6.2.2
@storybook/addon-knobs: ^6.2.2 => 6.2.2
@storybook/react: ^6.2.2 => 6.2.2

Additional context
I have verified that all hooks being used follow all rules of React hook standards. The error only occurs if these addons are registered. I verified these are the offending addons by isolating them as the only addons installed (one at a time) and with a single basic component story.

react: ^17.0.2
react-dom: ^17.0.2

.babelrc

{
    "presets": [
        [
            "@babel/preset-react",
            {
                "runtime": "automatic",
                "importSource": "@emotion/react"
            }
        ]
    ],
    "plugins": ["@emotion/babel-plugin"]
}

Activity

  1. shilman commented on Apr 5, 2021

    @shilman
    Contributor

    FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs, which are slated for deprecation.

    Please upgrade and try out controls today!

  2. self-assigned this
    on Apr 8, 2021
  3. shellsant commented on Apr 27, 2021

    @shellsant

    FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs, which are slated for deprecation.

    Please upgrade and try out controls today!

    @shilman would it replace decorators too? is it the same thing? could you give an example? I did not find it in your links

  4. shellsant commented on Apr 27, 2021

    @shellsant

    I noticed it is happening only with strictMode: true on main.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

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