search

RyanClementsHax / storybook-addon-next

A no config Storybook addon that makes Next.js features just work in Storybook
MIT License
220 stars 29 forks source link

Enabling react strict mode with this addon causes "Rendered more hooks than during the previous render." error. #170

Closed martdavidson closed 1 year ago

martdavidson commented 1 year ago

Describe the bug

Before installing this addon, I was able to enable strict mode in storybook by doing:

reactOptions: {
    strictMode: true,
  }

in my main.ts as documented by this issue https://github.com/storybookjs/storybook/issues/12734 and associated PR.

This was working fine, I would see my effects being called twice on mount.

Since adding this package, any combination of strictMode: true or putting reactStrictMode: true in the next.config.js I am using for this addon results in all stories throwing:

Error
Rendered more hooks than during the previous render.

Call Stack
 useHook
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12364:13
 useMemoLike
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12391:18
 useMemo
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12403:10
 withOutline
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:11886:81
 undefined
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:12269:21
 undefined
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:34690:12
 undefined
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:34739:14
 renderWithHooks
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:139816:18
 mountIndeterminateComponent
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:143580:13
 beginWork
  vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-285286.iframe.bundle.js:145093:16

Is this expected? Do you have an idea right off the bat of what is happening here?

I will fill in a valid reproduction if it's not immediately obvious to you why this might be happening. I believe the one liner in Steps to reproduce will cause this if you run one of your examples with it.

Steps to reproduce

  1. Add reactOptions: { strictMode: true } to your export from .storybook/main.js.
  2. Serve your storybook.

Expected behavior

I expect storybook's strict mode API to "just work".

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Mac OS Next 13.1.1 Storybook 6.5.15 React 18.2.0

storybook-addon-next version

1.7.1

Additional context

No response

RyanClementsHax commented 1 year ago

Ah, I see this issue. This seems to be an error with how styled-jsx works with storybook. This might be something to solve on either styled-jsx's or storybook's end.

I would look into this further, but you're better served migrating to storybook's framework api that comes out with v7 on march 14. I'm directing everyone using this addon to migrate over.