search

storybookjs / addon-svelte-csf

[Incubation] CSF using Svelte components.
MIT License
103 stars 32 forks source link

[Bug] Controls panel is not responsive in Storybook 7 #89

Closed jwerre closed 1 year ago

jwerre commented 1 year ago

Describe the bug

The Controls panel does not update the component when properties are changed. The url is modified so a simple refresh updates the component properties, but he component is not responsive. The following error is logged when changing properties:

Uncaught (in promise) Error: cannot render when canvasElement is unset
    at StoryRender.render (runtime.mjs:67:9727)
    at StoryRender.rerender (runtime.mjs:67:11621)
    at runtime.mjs:73:2836
    at Array.map (<anonymous>)
    at PreviewWeb.onUpdateArgs (runtime.mjs:73:2827)
    at PreviewWeb.onUpdateArgs (runtime.mjs:84:1614)
    at runtime.mjs:5:1829
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (runtime.mjs:5:1813)
    at PostmsgTransport.<anonymous> (runtime.mjs:5:479)
render @ runtime.mjs:67
rerender @ runtime.mjs:67
(anonymous) @ runtime.mjs:73
onUpdateArgs @ runtime.mjs:73
onUpdateArgs @ runtime.mjs:84
(anonymous) @ runtime.mjs:5
handleEvent @ runtime.mjs:5
(anonymous) @ runtime.mjs:5
handler @ runtime.mjs:10
handleEvent @ runtime.mjs:10
await in handleEvent (async)
onUpdateArgs @ runtime.mjs:84
(anonymous) @ runtime.mjs:5
handleEvent @ runtime.mjs:5
(anonymous) @ runtime.mjs:5
handler @ runtime.mjs:10
handleEvent @ runtime.mjs:10
postMessage (async)
(anonymous) @ runtime.mjs:1
send @ runtime.mjs:1
handler @ chunk-HWPOBH72.mjs:39
emit @ chunk-HWPOBH72.mjs:39
emit @ chunk-HWPOBH72.mjs:39
updateStoryArgs @ chunk-HWPOBH72.mjs:53
(anonymous) @ chunk-HWPOBH72.mjs:53
(anonymous) @ index.mjs:19
onChange @ index.mjs:1
callCallback2 @ chunk-NF3XLATS.mjs:2
invokeGuardedCallbackDev @ chunk-NF3XLATS.mjs:2
invokeGuardedCallback @ chunk-NF3XLATS.mjs:2
invokeGuardedCallbackAndCatchFirstError @ chunk-NF3XLATS.mjs:2
executeDispatch @ chunk-NF3XLATS.mjs:2
executeDispatchesInOrder @ chunk-NF3XLATS.mjs:2
executeDispatchesAndRelease @ chunk-NF3XLATS.mjs:8
executeDispatchesAndReleaseTopLevel @ chunk-NF3XLATS.mjs:8
forEachAccumulated @ chunk-NF3XLATS.mjs:8
runEventsInBatch @ chunk-NF3XLATS.mjs:8
runExtractedPluginEventsInBatch @ chunk-NF3XLATS.mjs:8
handleTopLevel @ chunk-NF3XLATS.mjs:8
batchedEventUpdates$1 @ chunk-NF3XLATS.mjs:90
batchedEventUpdates @ chunk-NF3XLATS.mjs:2
dispatchEventForLegacyPluginEventSystem @ chunk-NF3XLATS.mjs:8
attemptToDispatchEvent @ chunk-NF3XLATS.mjs:8
dispatchEvent @ chunk-NF3XLATS.mjs:8
unstable_runWithPriority @ chunk-NF3XLATS.mjs:1
runWithPriority$1 @ chunk-NF3XLATS.mjs:9
discreteUpdates$1 @ chunk-NF3XLATS.mjs:90
discreteUpdates @ chunk-NF3XLATS.mjs:2
dispatchDiscreteEvent @ chunk-NF3XLATS.mjs:8

Steps to reproduce the behavior

  1. Install Storybook version 7
  2. Create a simple Button component Story component.
  3. Run npm run storybook
  4. Change the rounded property in the Controls panel
  5. Watch nothing happen (doh!).
  6. Refresh the page.
  7. See button is now rounded.

Expected behavior

The button should be responsive to changes in the Storybook Controls panel.

Environment

JReinhold commented 1 year ago

Closing as duplicate of https://github.com/storybookjs/addon-svelte-csf/issues/80