Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Knobs & Backgrounds addons cause React hooks render error #2

Open
ArrayKnight opened this issue Apr 4, 2021 · 3 comments
Open

Knobs & Backgrounds addons cause React hooks render error #2

ArrayKnight opened this issue Apr 4, 2021 · 3 comments
Assignees

Comments

@ArrayKnight
Copy link

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"]
}
@shilman
Copy link
Member

shilman commented Apr 5, 2021

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!

@yannbf yannbf self-assigned this Apr 8, 2021
@sheldontw
Copy link

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

@sheldontw
Copy link

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants