schalkneethling
commented
4 years ago Update: Based on the deprecation warning in the devtools I changed all instances of Preview to Canvas inside the mdx story file and restarted Storybook.
Preview doc block has been renamed to Canvas.
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamedStorybook builds and now shows all the button instances that do not use an SVG component(when viewed inside the Canvas tab).
When I click on the Story in the sidebar for the button that does use an SVG component, the error in the Storybook UI is as follows:
Cannot read property 'displayName' of undefined
TypeError: Cannot read property 'displayName' of undefined
at getReactElementDisplayName (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:157192:23)
at parseReactElement (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:157227:21)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:157243:12
at Array.map (<anonymous>)
at parseReactElement (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:157242:106)
at reactElementToJsxString (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:157706:21)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:7949:76
at mapSingleChildIntoContext (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:163754:26)
at traverseAllChildrenImpl (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:163612:5)
at traverseAllChildren (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:163697:10)
at mapIntoWithKeyPrefixInternal (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:163779:3)
at Object.mapChildren [as map] (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:163803:3)
at renderJsx (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:7946:43)
at jsxDecorator (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:8000:18)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24402:21
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:26153:14
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:26160:16
at wrapper (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24141:12)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24920:14
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24934:26
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24402:21
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:26153:14
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:26160:16
at wrapper (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:3668:12)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24920:14
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24934:26
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24402:21
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:26153:14
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:24430:20
at storyFn (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:27554:30)
at renderWithHooks (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:146587:18)
at mountIndeterminateComponent (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:149266:13)
at beginWork (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:150380:16)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:131972:14)
at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:132021:16)
at invokeGuardedCallback (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:132076:31)
at beginWork$1 (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:154987:7)
at performUnitOfWork (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:153941:12)
at workLoopSync (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:153914:22)
at performSyncWorkOnRoot (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:153540:9)
at scheduleUpdateOnFiber (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:152972:7)
at updateContainer (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:156157:3)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:156542:7
at unbatchedUpdates (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:153687:12)
at legacyRenderSubtreeIntoContainer (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:156541:5)
at Object.render (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:156624:10)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187731:26
at new Promise (<anonymous>)
at render (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187730:10)
at _callee$ (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187820:20)
at tryCatch (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:179215:40)
at Generator.invoke [as _invoke] (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:179444:22)
at Generator.prototype.<computed> [as next] (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:179267:21)
at asyncGeneratorStep (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187701:103)
at _next (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187703:194)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187703:364
at new Promise (<anonymous>)
at StoryRenderer.<anonymous> (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187703:97)
at StoryRenderer.renderMain [as render] (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:187793:22)
at _callee$ (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186610:33)
at tryCatch (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:179215:40)
at Generator.invoke [as _invoke] (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:179444:22)
at Generator.prototype.<computed> [as next] (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:179267:21)
at asyncGeneratorStep (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186280:103)
at _next (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186282:194)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186282:364
at new Promise (<anonymous>)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186282:97
at StoryRenderer.renderStory (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186630:12)
at StoryRenderer.renderStoryIfChanged (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186520:18)
at StoryRenderer.renderCurrentStory (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186431:12)
at Object.<anonymous> (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:186359:24)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25723:14
at Array.forEach (<anonymous>)
at Channel.handleEvent (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25722:19)
at handler (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25648:16)
at Channel.emit (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25655:9)
at StoryStore.setSelection (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:27747:23)
at Object.<anonymous> (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:27269:23)
at http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25723:14
at Array.forEach (<anonymous>)
at Channel.handleEvent (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25722:19)
at PostmsgTransport.<anonymous> (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25612:22)
at PostmsgTransport.handler (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25270:17)
at PostmsgTransport.handleEvent (http://localhost:6006/vendors~main.ae048bfc7abe27cf76c3.bundle.js:25444:16)Seems that witing the context of the Story the SVG component is undefined aka out of scope? I also tried not nesting the Story block inside anything, but that produces the same error as the original issue detailed.
Clicking on the "Docs" tab renders a blank docs page irrespective of the button selected in the sidebar. Is this the expected behavior?
shilman
mrmckeb
benknight
stale[bot]
jimishshah
PupoSDC
darkship
geocine
declanramsay
wes0310
kicikhaluk
tpkee
Describe the bug
In a
mdxstory file I have the following:Further down in the same file I then have:
Starting up Storybook happens without any problems but upon launching it in the browser emits the following error in Developer Tools:
It seemed to me that my code was sound and so I tested this inside a
tsxfile inside the app i.e. outside of Storybook:Starting up the app and loading it in the browsers renders the button with the SVG without any errors so, this seems to be a bug in how Storybook handles the above case when embedded inside a
StoryExpected behavior
It renders the button with the relevant text and SVG element
System: