search

storybookjs / addon-knobs

Storybook addon prop editor component
MIT License
12 stars 17 forks source link

Knobs & Backgrounds addons cause React hooks render error #2

Open ArrayKnight opened 3 years ago

ArrayKnight commented 3 years ago

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 commented 3 years ago

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!

sheldontw commented 3 years ago

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 commented 3 years ago

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