search

storybookjs / addon-design-assets

Design asset preview for storybook
MIT License
6 stars 3 forks source link

[addon-design-assets]: JS error occurs when zapping through stories with different amount of assets #1

Open iwan-uschka opened 3 years ago

iwan-uschka commented 3 years ago

Describe the bug Story A contains 3 assets. Story B contains 2 assets. I select asset 3 in Story A. After that i select Story B which doesn't have any asset at position 3. A JS error occurs:

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
  at Panel (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:5781:39)
  at div
  at AddonPanel (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:171298:21)
  at div
  at Styled(div)
  at div
  at Styled(div)
  at Tabs (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:122186:25)
  at AddonPanel (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:83059:22)
  at ManagerConsumer (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:112373:28)
  at Panel
  at div
  at Styled(div)
  at Panel (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:74857:28)
  at div
  at Styled(div)
  at div
  at Styled(div)
  at Main (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:74820:34)
  at Layout (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:74987:5)
  at WithTheme(Layout)
  at DesktopLayout (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:74547:20)
  at div
  at Styled(div)
  at App (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:152166:23)
  at SizeMeReferenceWrapper (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:152527:5)
  at SizeMeRenderer(Component) (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:152580:29)
  at SizeMe(Component) (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:152661:9)
  at ThemeProvider
  at http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:115538:25
  at ManagerConsumer (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:112373:28)
  at EffectOnMount (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:112360:24)
  at Manager (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:112219:5)
  at Location (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:4450:23)
  at QueryLocation (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:141730:24)
  at LocationProvider (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:4470:5)
  at HelmetProvider (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:120431:5327)
  at Root (http://192.168.0.20:6006/vendors~main.b0b35d8….bundle.js:115520:23)
overrideMethod  @   react_devtools_backend.js:2430
printWarning    @   vendors~main.b0b35d8…f6c.bundle.js:28244
error   @   vendors~main.b0b35d8…f6c.bundle.js:28220
warnAboutRenderPhaseUpdatesInDEV    @   vendors~main.b0b35d8…f6c.bundle.js:52183
scheduleUpdateOnFiber   @   vendors~main.b0b35d8…f6c.bundle.js:50008
enqueueSetState @   vendors~main.b0b35d8…f6c.bundle.js:40644
push../node_modules/react/cjs/react.development.js.Component.setState   @   vendors~main.b0b35d8…f6c.bundle.js:65614
setState    @   vendors~main.b0b35d8…6c.bundle.js:112250
newState    @   vendors~main.b0b35d8…6c.bundle.js:144352
_callee$    @   vendors~main.b0b35d8…6c.bundle.js:144351
tryCatch    @   vendors~main.b0b35d8…f6c.bundle.js:87651
invoke  @   vendors~main.b0b35d8…f6c.bundle.js:87792
(anonymous) @   vendors~main.b0b35d8…f6c.bundle.js:87684
asyncGeneratorStep  @   vendors~main.b0b35d8…6c.bundle.js:144253
_next   @   vendors~main.b0b35d8…6c.bundle.js:144255
(anonymous) @   vendors~main.b0b35d8…6c.bundle.js:144255
(anonymous) @   vendors~main.b0b35d8…6c.bundle.js:144255
setState    @   vendors~main.b0b35d8…6c.bundle.js:144383
setAddonState   @   vendors~main.b0b35d8…6c.bundle.js:146813
setState    @   vendors~main.b0b35d8…6c.bundle.js:112464
(anonymous) @   vendors~main.b0b35d8…6c.bundle.js:112503
(anonymous) @   vendors~main.b0b35d8…9f6c.bundle.js:5797
updateMemo  @   vendors~main.b0b35d8…f6c.bundle.js:44044
useMemo @   vendors~main.b0b35d8…f6c.bundle.js:44590
useMemo @   vendors~main.b0b35d8…f6c.bundle.js:66781
Panel   @   vendors~main.b0b35d8…9f6c.bundle.js:5791
renderWithHooks @   vendors~main.b0b35d8…f6c.bundle.js:43162
updateFunctionComponent @   vendors~main.b0b35d8…f6c.bundle.js:45533
beginWork   @   vendors~main.b0b35d8…f6c.bundle.js:47240
beginWork$1 @   vendors~main.b0b35d8…f6c.bundle.js:52112
performUnitOfWork   @   vendors~main.b0b35d8…f6c.bundle.js:50948
workLoopSync    @   vendors~main.b0b35d8…f6c.bundle.js:50879
renderRootSync  @   vendors~main.b0b35d8…f6c.bundle.js:50842
performSyncWorkOnRoot   @   vendors~main.b0b35d8…f6c.bundle.js:50465
(anonymous) @   vendors~main.b0b35d8…f6c.bundle.js:39504
unstable_runWithPriority    @   vendors~main.b0b35d8…f6c.bundle.js:68599
runWithPriority$1   @   vendors~main.b0b35d8…f6c.bundle.js:39453
flushSyncCallbackQueueImpl  @   vendors~main.b0b35d8…f6c.bundle.js:39499
flushSyncCallbackQueue  @   vendors~main.b0b35d8…f6c.bundle.js:39486
scheduleUpdateOnFiber   @   vendors~main.b0b35d8…f6c.bundle.js:50065
enqueueSetState @   vendors~main.b0b35d8…f6c.bundle.js:40644
push../node_modules/react/cjs/react.development.js.Component.setState   @   vendors~main.b0b35d8…f6c.bundle.js:65614
(anonymous) @   vendors~main.b0b35d8…9f6c.bundle.js:4518
requestAnimationFrame (async)       
(anonymous) @   vendors~main.b0b35d8…9f6c.bundle.js:4516
Promise.then (async)        
(anonymous) @   vendors~main.b0b35d8…9f6c.bundle.js:4514
(anonymous) @   vendors~main.b0b35d8…9f6c.bundle.js:5246
navigate    @   vendors~main.b0b35d8…9f6c.bundle.js:5245
queryNavigate   @   vendors~main.b0b35d8…6c.bundle.js:141708
selectStory @   vendors~main.b0b35d8…6c.bundle.js:147607
(anonymous) @   vendors~main.b0b35d8…f6c.bundle.js:77861
onClick @   vendors~main.b0b35d8…f6c.bundle.js:79131
callCallback    @   vendors~main.b0b35d8…f6c.bundle.js:32122
invokeGuardedCallbackDev    @   vendors~main.b0b35d8…f6c.bundle.js:32171
invokeGuardedCallback   @   vendors~main.b0b35d8…f6c.bundle.js:32233
invokeGuardedCallbackAndCatchFirstError @   vendors~main.b0b35d8…f6c.bundle.js:32247
executeDispatch @   vendors~main.b0b35d8…f6c.bundle.js:36420
processDispatchQueueItemsInOrder    @   vendors~main.b0b35d8…f6c.bundle.js:36452
processDispatchQueue    @   vendors~main.b0b35d8…f6c.bundle.js:36465
dispatchEventsForPlugins    @   vendors~main.b0b35d8…f6c.bundle.js:36476
(anonymous) @   vendors~main.b0b35d8…f6c.bundle.js:36685
batchedEventUpdates$1   @   vendors~main.b0b35d8…f6c.bundle.js:50568
batchedEventUpdates @   vendors~main.b0b35d8…f6c.bundle.js:31922
dispatchEventForPluginEventSystem   @   vendors~main.b0b35d8…f6c.bundle.js:36684
attemptToDispatchEvent  @   vendors~main.b0b35d8…f6c.bundle.js:34182
dispatchEvent   @   vendors~main.b0b35d8…f6c.bundle.js:34101
unstable_runWithPriority    @   vendors~main.b0b35d8…f6c.bundle.js:68599
runWithPriority$1   @   vendors~main.b0b35d8…f6c.bundle.js:39453
discreteUpdates$1   @   vendors~main.b0b35d8…f6c.bundle.js:50585
discreteUpdates @   vendors~main.b0b35d8…f6c.bundle.js:31933
dispatchDiscreteEvent   @   vendors~main.b0b35d8…f6c.bundle.js:34066
shilman commented 3 years ago

We're planning to deprecate addon-design-assets and are recommending this instead:

https://storybook.js.org/addons/storybook-addon-designs