search

chromaui / addon-visual-tests

Visual Tests addon for Storybook
MIT License
36 stars 2 forks source link

Invalid Hook Call Error With v2.0.0 #337

Closed chmmpagne closed 1 month ago

chmmpagne commented 1 month ago

Describe the bug

After upgrading to v2.0.0, I get the following errors in the console. Disabling the addon or downgrading to v1.9.0 fixes it.

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at z (manager-bundle.js:4:13462)
    at e.useContext (manager-bundle.js:4:15336)
    at Hv (manager-bundle.js:29:68454)
    at renderWithHooks (globals-runtime.js:10307:15)
    at mountIndeterminateComponent (globals-runtime.js:12176:92)
    at beginWork (globals-runtime.js:12799:18)
    at HTMLUnknownElement.callCallback (globals-runtime.js:4292:26)
    at Object.invokeGuardedCallbackDev (globals-runtime.js:4306:111)
    at invokeGuardedCallback (globals-runtime.js:4322:31)
    at beginWork$1 (globals-runtime.js:15289:69)
manager-bundle.js:4 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at z (manager-bundle.js:4:13462)
    at e.useState (manager-bundle.js:4:15762)
    at Vg (manager-bundle.js:7:44727)
    at renderWithHooks (globals-runtime.js:10307:15)
    at mountIndeterminateComponent (globals-runtime.js:12176:92)
    at beginWork (globals-runtime.js:12799:18)
    at HTMLUnknownElement.callCallback (globals-runtime.js:4292:26)
    at Object.invokeGuardedCallbackDev (globals-runtime.js:4306:111)
    at invokeGuardedCallback (globals-runtime.js:4322:31)
    at beginWork$1 (globals-runtime.js:15289:69)
manager-bundle.js:4 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at z (manager-bundle.js:4:13462)
    at e.useContext (manager-bundle.js:4:15336)
    at Hv (manager-bundle.js:29:68454)
    at renderWithHooks (globals-runtime.js:10307:15)
    at mountIndeterminateComponent (globals-runtime.js:12176:92)
    at beginWork (globals-runtime.js:12799:18)
    at HTMLUnknownElement.callCallback (globals-runtime.js:4292:26)
    at Object.invokeGuardedCallbackDev (globals-runtime.js:4306:111)
    at invokeGuardedCallback (globals-runtime.js:4322:31)
    at beginWork$1 (globals-runtime.js:15289:69)
manager-bundle.js:4 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at z (manager-bundle.js:4:13462)
    at e.useState (manager-bundle.js:4:15762)
    at Vg (manager-bundle.js:7:44727)
    at renderWithHooks (globals-runtime.js:10307:15)
    at mountIndeterminateComponent (globals-runtime.js:12176:92)
    at beginWork (globals-runtime.js:12799:18)
    at HTMLUnknownElement.callCallback (globals-runtime.js:4292:26)
    at Object.invokeGuardedCallbackDev (globals-runtime.js:4306:111)
    at invokeGuardedCallback (globals-runtime.js:4322:31)
    at beginWork$1 (globals-runtime.js:15289:69)
globals-runtime.js:11619 The above error occurred in the <Hv> component:

    at Hv (http://localhost:6006/sb-addons/chromatic-com-storybook-11/manager-bundle.js:29:68343)
    at render
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at Heading (http://localhost:6006/sb-manager/runtime.js:3923:20)
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at Spaced (http://localhost:6006/sb-manager/globals-runtime.js:47408:35)
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at div
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:24608:22
    at http://localhost:6006/sb-manager/globals-runtime.js:25016:30
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:24608:22
    at Provider (http://localhost:6006/sb-manager/globals-runtime.js:24747:20)
    at http://localhost:6006/sb-manager/globals-runtime.js:24977:30
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at http://localhost:6006/sb-manager/globals-runtime.js:25522:18
    at nav
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at Sidebar (http://localhost:6006/sb-manager/runtime.js:9276:12)
    at ManagerConsumer (http://localhost:6006/sb-manager/globals-runtime.js:53171:11)
    at Sideber (http://localhost:6006/sb-manager/runtime.js:9554:59)
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at Layout (http://localhost:6006/sb-manager/runtime.js:11163:76)
    at App (http://localhost:6006/sb-manager/runtime.js:11297:51)
    at LayoutProvider (http://localhost:6006/sb-manager/runtime.js:3761:41)
    at ThemeProvider (http://localhost:6006/sb-manager/globals-runtime.js:17853:16)
    at http://localhost:6006/sb-manager/runtime.js:11828:20
    at ManagerConsumer (http://localhost:6006/sb-manager/globals-runtime.js:53171:11)
    at EffectOnMount (http://localhost:6006/sb-manager/globals-runtime.js:53167:51)
    at ManagerProvider (http://localhost:6006/sb-manager/globals-runtime.js:53098:5)
    at Location (http://localhost:6006/sb-manager/globals-runtime.js:52365:41)
    at Main (http://localhost:6006/sb-manager/runtime.js:11816:136)
    at Router (http://localhost:6006/sb-manager/globals-runtime.js:52053:15)
    at LocationProvider (http://localhost:6006/sb-manager/globals-runtime.js:52395:39)
    at r (http://localhost:6006/sb-manager/runtime.js:3067:19)
    at Root (http://localhost:6006/sb-manager/runtime.js:11815:41)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ globals-runtime.js:11619
globals-runtime.js:11619 The above error occurred in the <Vg> component:

    at Vg (http://localhost:6006/sb-addons/chromatic-com-storybook-11/manager-bundle.js:7:44692)
    at Dg (http://localhost:6006/sb-addons/chromatic-com-storybook-11/manager-bundle.js:7:45430)
    at render
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at nav
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at Sidebar (http://localhost:6006/sb-manager/runtime.js:9276:12)
    at ManagerConsumer (http://localhost:6006/sb-manager/globals-runtime.js:53171:11)
    at Sideber (http://localhost:6006/sb-manager/runtime.js:9554:59)
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at div
    at http://localhost:6006/sb-manager/globals-runtime.js:17820:33
    at Layout (http://localhost:6006/sb-manager/runtime.js:11163:76)
    at App (http://localhost:6006/sb-manager/runtime.js:11297:51)
    at LayoutProvider (http://localhost:6006/sb-manager/runtime.js:3761:41)
    at ThemeProvider (http://localhost:6006/sb-manager/globals-runtime.js:17853:16)
    at http://localhost:6006/sb-manager/runtime.js:11828:20
    at ManagerConsumer (http://localhost:6006/sb-manager/globals-runtime.js:53171:11)
    at EffectOnMount (http://localhost:6006/sb-manager/globals-runtime.js:53167:51)
    at ManagerProvider (http://localhost:6006/sb-manager/globals-runtime.js:53098:5)
    at Location (http://localhost:6006/sb-manager/globals-runtime.js:52365:41)
    at Main (http://localhost:6006/sb-manager/runtime.js:11816:136)
    at Router (http://localhost:6006/sb-manager/globals-runtime.js:52053:15)
    at LocationProvider (http://localhost:6006/sb-manager/globals-runtime.js:52395:39)
    at r (http://localhost:6006/sb-manager/runtime.js:3067:19)
    at Root (http://localhost:6006/sb-manager/runtime.js:11815:41)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ globals-runtime.js:11619
globals-runtime.js:15094 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at z (manager-bundle.js:4:13462)
    at e.useContext (manager-bundle.js:4:15336)
    at Hv (manager-bundle.js:29:68454)
    at renderWithHooks (globals-runtime.js:10307:15)
    at mountIndeterminateComponent (globals-runtime.js:12176:92)
    at beginWork (globals-runtime.js:12799:18)
    at beginWork$1 (globals-runtime.js:15285:18)
    at performUnitOfWork (globals-runtime.js:14997:42)
    at workLoopSync (globals-runtime.js:14962:9)
    at renderRootSync (globals-runtime.js:14949:11)

To reproduce

Upgrade from 1.9.0 to 2.0.0. This is within a private repository; I can see about making a minimal reproduction if needed.

Environment

MacOS 14.6.1 - Chromium (Arc)

Relevant Dependency Versions

"@chromatic-com/playwright": "^0.6.18",
"@chromatic-com/storybook": "^1.9.0",
"@storybook/addon-a11y": "^8.2.9",
"@storybook/addon-coverage": "^1.0.4",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-onboarding": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "^8.2.9",
"@storybook/test-runner": "^0.19.1",
"chromatic": "^11.7.1",
"eslint-plugin-storybook": "^0.8.0",
"msw": "^2.4.4",
"msw-storybook-addon": "^2.0.3",
"storybook": "^8.2.9",
oleksandr-danylchenko commented 1 month ago

I'm experiencing the same issue running the storybook@8.3.0 with the @chromatic-com/storybook@2.0.0:

manager-bundle.js:4 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at z (manager-bundle.js:4:13462)
    at e.useCallback (manager-bundle.js:4:15280)
    at Xm (manager-bundle.js:29:10184)
    at Vx (manager-bundle.js:335:4891)
    at renderWithHooks (globals-runtime.js:10305:15)
    at mountIndeterminateComponent (globals-runtime.js:12174:92)
    at beginWork (globals-runtime.js:12797:18)
    at HTMLUnknownElement.callCallback (globals-runtime.js:4290:27)
    at Object.invokeGuardedCallbackDev (globals-runtime.js:4304:111)
    at invokeGuardedCallback (globals-runtime.js:4320:31)
yannbf commented 1 month ago

Hey @chmmpagne @oleksandr-danylchenko thanks a lot for reporting! Everyone, please update to 2.0.1, the offending issue is reverted.