[Bug] Controls panel is not responsive in Storybook 7

[jwerre]

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

• OS: OSX 13.1
• Node.js version: v16.14.2
• NPM version: 8.5.0
• Browser (if applicable): Chrome
• Browser version (if applicable): 108.0.5359.124
• Device (if applicable): Mac

[JReinhold]

Closing as duplicate of #80