search

jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.24k stars 508 forks source link

Storybook 6.0 with React 17 renders white screen #918

Closed whoisryosuke closed 3 years ago

whoisryosuke commented 3 years ago

Current Behavior

  1. Bootstrapped new React + Storybook + Typescript project
  2. Ran yarn storybook
  3. Storybook compiles correctly, launches in browser, and displays white screen.

Checking the console, I see the following errors output:

react.development.js:1431 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.1185a7e89ba836cdc5a3.bundle.js:35494)
    at Object.mapper [as current] (vendors~main.1185a7e89ba836cdc5a3.bundle.js:35927)
    at ManagerConsumer (vendors~main.1185a7e89ba836cdc5a3.bundle.js:9638)
    at renderWithHooks (vendors~main.1185a7e89ba836cdc5a3.bundle.js:52296)
    at mountIndeterminateComponent (vendors~main.1185a7e89ba836cdc5a3.bundle.js:54975)
    at beginWork (vendors~main.1185a7e89ba836cdc5a3.bundle.js:56089)
    at HTMLUnknownElement.callCallback (vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681)

vendors~main.1185a7e89ba836cdc5a3.bundle.js:57020 The above error occurred in the <ManagerConsumer> component:
    in ManagerConsumer
    in Unknown (created by Mobile)
    in div
    in Styled(div)
    in div
    in Styled(div)
    in Unknown (created by Mobile)
    in div
    in Styled(div) (created by Mobile)
    in Mobile
    in div
    in Styled(div)
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.1185a7e89ba836cdc5a3.bundle.js:35494)
    at Object.mapper [as current] (vendors~main.1185a7e89ba836cdc5a3.bundle.js:35927)
    at ManagerConsumer (vendors~main.1185a7e89ba836cdc5a3.bundle.js:9638)
    at renderWithHooks (vendors~main.1185a7e89ba836cdc5a3.bundle.js:52296)
    at mountIndeterminateComponent (vendors~main.1185a7e89ba836cdc5a3.bundle.js:54975)
    at beginWork (vendors~main.1185a7e89ba836cdc5a3.bundle.js:56089)
    at HTMLUnknownElement.callCallback (vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681)
resolveDispatcher @ react.development.js:1431
useContext @ react.development.js:1439
useTheme @ emotion-theming.browser.esm.js:112
useMenu @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:35494
mapper @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:35927
ManagerConsumer @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:9638
renderWithHooks @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:52296
mountIndeterminateComponent @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:54975
beginWork @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:56089
callCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681
invokeGuardedCallbackDev @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37730
invokeGuardedCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37785
beginWork$1 @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60696
performUnitOfWork @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59650
workLoopSync @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59623
performSyncWorkOnRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59249
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48582
unstable_runWithPriority @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:75507
runWithPriority$1 @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48532
flushSyncCallbackQueueImpl @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48577
flushSyncCallbackQueue @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48565
scheduleUpdateOnFiber @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:58692
enqueueSetState @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:50132
push../node_modules/@storybook/ui/node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:73023
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72319
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72359
exec @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:89424
setTimeout (async)
wrapper @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:89464
addListener @ element-resize-detector.js:173
onElementDetectable @ element-resize-detector.js:248
ready @ scroll.js:574
process @ batch-processor.js:129
processBatch @ batch-processor.js:38
setTimeout (async)
raf @ batch-processor.js:85
requestFrame @ batch-processor.js:88
processBatchAsync @ batch-processor.js:66
addFunction @ batch-processor.js:24
install @ scroll.js:581
makeDetectable @ scroll.js:600
attachListenerToElement @ element-resize-detector.js:238
utils.forEach @ collection-utils.js:14
listenTo @ element-resize-detector.js:207
handleDOMNode @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72408
componentDidMount @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72371
commitLifeCycles @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:57307
commitLayoutEffects @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60296
callCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681
invokeGuardedCallbackDev @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37730
invokeGuardedCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37785
commitRootImpl @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60034
unstable_runWithPriority @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:75507
runWithPriority$1 @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48532
commitRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59874
finishSyncRender @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59300
performSyncWorkOnRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59286
scheduleUpdateOnFiber @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:58681
updateContainer @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:61866
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:62251
unbatchedUpdates @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59396
legacyRenderSubtreeIntoContainer @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:62250
render @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:62333
renderStorybookUI @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:36062
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:27029
Promise.then (async)
./node_modules/@storybook/core/dist/client/manager/index.js @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:27026
__webpack_require__ @ runtime~main.99691078705b39185f99.bundle.js:80
0 @ main.273d6d4a583e2cc7290b.bundle.js:1569
__webpack_require__ @ runtime~main.99691078705b39185f99.bundle.js:80
checkDeferredModules @ runtime~main.99691078705b39185f99.bundle.js:46
webpackJsonpCallback @ runtime~main.99691078705b39185f99.bundle.js:33
(anonymous) @ main.273d6d4a583e2cc7290b.bundle.js:1
vendors~main.1185a7e89ba836cdc5a3.bundle.js:57020 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:57020
logError @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:57057
update.callback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:58201
callCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:49983
commitUpdateQueue @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:50004
commitLifeCycles @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:57376
commitLayoutEffects @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60296
callCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681
invokeGuardedCallbackDev @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37730
invokeGuardedCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37785
commitRootImpl @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60034
unstable_runWithPriority @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:75507
runWithPriority$1 @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48532
commitRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59874
finishSyncRender @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59300
performSyncWorkOnRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59286
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48582
unstable_runWithPriority @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:75507
runWithPriority$1 @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48532
flushSyncCallbackQueueImpl @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48577
flushSyncCallbackQueue @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48565
scheduleUpdateOnFiber @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:58692
enqueueSetState @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:50132
push../node_modules/@storybook/ui/node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:73023
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72319
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72359
exec @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:89424
setTimeout (async)
wrapper @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:89464
addListener @ element-resize-detector.js:173
onElementDetectable @ element-resize-detector.js:248
ready @ scroll.js:574
process @ batch-processor.js:129
processBatch @ batch-processor.js:38
setTimeout (async)
raf @ batch-processor.js:85
requestFrame @ batch-processor.js:88
processBatchAsync @ batch-processor.js:66
addFunction @ batch-processor.js:24
install @ scroll.js:581
makeDetectable @ scroll.js:600
attachListenerToElement @ element-resize-detector.js:238
utils.forEach @ collection-utils.js:14
listenTo @ element-resize-detector.js:207
handleDOMNode @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72408
componentDidMount @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:72371
commitLifeCycles @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:57307
commitLayoutEffects @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60296
callCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681
invokeGuardedCallbackDev @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37730
invokeGuardedCallback @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:37785
commitRootImpl @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:60034
unstable_runWithPriority @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:75507
runWithPriority$1 @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:48532
commitRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59874
finishSyncRender @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59300
performSyncWorkOnRoot @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59286
scheduleUpdateOnFiber @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:58681
updateContainer @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:61866
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:62251
unbatchedUpdates @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:59396
legacyRenderSubtreeIntoContainer @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:62250
render @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:62333
renderStorybookUI @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:36062
(anonymous) @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:27029
Promise.then (async)
./node_modules/@storybook/core/dist/client/manager/index.js @ vendors~main.1185a7e89ba836cdc5a3.bundle.js:27026
__webpack_require__ @ runtime~main.99691078705b39185f99.bundle.js:80
0 @ main.273d6d4a583e2cc7290b.bundle.js:1569
__webpack_require__ @ runtime~main.99691078705b39185f99.bundle.js:80
checkDeferredModules @ runtime~main.99691078705b39185f99.bundle.js:46
webpackJsonpCallback @ runtime~main.99691078705b39185f99.bundle.js:33
(anonymous) @ main.273d6d4a583e2cc7290b.bundle.js:1
vendors~main.1185a7e89ba836cdc5a3.bundle.js:48595 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at Object.useContext (react.development.js:1439)
    at useTheme (emotion-theming.browser.esm.js:112)
    at useMenu (vendors~main.1185a7e89ba836cdc5a3.bundle.js:35494)
    at Object.mapper [as current] (vendors~main.1185a7e89ba836cdc5a3.bundle.js:35927)
    at ManagerConsumer (vendors~main.1185a7e89ba836cdc5a3.bundle.js:9638)
    at renderWithHooks (vendors~main.1185a7e89ba836cdc5a3.bundle.js:52296)
    at mountIndeterminateComponent (vendors~main.1185a7e89ba836cdc5a3.bundle.js:54975)
    at beginWork (vendors~main.1185a7e89ba836cdc5a3.bundle.js:56089)
    at HTMLUnknownElement.callCallback (vendors~main.1185a7e89ba836cdc5a3.bundle.js:37681)

I tried changing the story output to see if it was the tsdx packaged component in index.tsx (<Thing />), but got the same error. I'm assuming it has something to do with Storybook, maybe a bugged version.

Expected behavior

Storybook launches with example component.

Suggested solution(s)

I tried updating Storybook, but it seems the most up to date, so maybe roll back to a more stable release? Looking at the Storybook config I don't see anything odd that might cause this. Has to be on the Storybook dependency side. Maybe a mismatch of React versions between deps.

Additional context

Your environment


  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 236.98 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.2.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 85.0.4183.121
    Edge: 85.0.564.63
    Firefox: 82.0
    Safari: 14.0
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.0.5 => 4.0.5
stackia commented 3 years ago

Same here. It looks like the latest public release of storybook doesn't work with react v17.

https://github.com/storybookjs/storybook/issues/12408#issuecomment-716637427

npx sb upgrade --prerelease

Upgrading to a prerelease version of storybook works for me.

agilgur5 commented 3 years ago

@stackia yea this sounds exactly like that upstream issue which is due to be fixed soon and has a prerelease as you mentioned.

@whoisryosuke if you are on React 17 (which I believe you are) then this duplicates that upstream issue.

In any case, TSDX does not control what version of React nor what version of Storybook you use, so this upstream issue is out-of-scope.

However, #916 tracks a similar bug that occurs with tsdx create which is in-scope. The issue with "bootstrapping" and running into this error would be a duplicate of that.