Knobs & Backgrounds addons cause React hooks render error #2
Description
Describe the bug
Error message: "Rendered more hooks than during the previous render." displayed instead of stories
To Reproduce
Steps to reproduce the behavior:
- Setup Storybook with Knobs and/or Background addons registered
- Add a global decorator (even a basic empty div)
- Run Storybook
- See error
Expected behavior
Story works as expected
Screenshots
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"]
}