Storybook: Using SVG as React component inside Story causes error - v6.0.0-rc.26

Created on 6 Aug 2020  路  23Comments  路  Source: storybookjs/storybook

Describe the bug

In a mdx story file I have the following:

import { Button } from "../src/ui/atoms/button.tsx";
import { ReactComponent as Github } from "../src/ui/dinocons/brands/github-mark-small.svg";

Further down in the same file I then have:

<Preview>
  <Story
    name="Icon button"
    args={{
      state: "positive icon right",
    }}
  >
    {(args) => (
      <Button {...args}>
        Icon on right <Github />
      </Button>
    )}
  </Story>
</Preview>

Starting up Storybook happens without any problems but upon launching it in the browser emits the following error in Developer Tools:

react.development.js:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by InlineStory)
    in InlineStory (created by Story)
    in Story (created by Context.Consumer)
    in MDXProvider (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Story (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in div (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Canvas)
    in MDXProvider (created by Canvas)
    in Canvas (created by deprecated)
    in deprecated (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in MDXContent (created by page)
    in AddContext (created by page)
    in page
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in SourceContainer (created by DocsContainer)
    in DocsContainer
printWarning @ react.development.js:315
error @ react.development.js:287
createElementWithValidation @ react.development.js:1788
createElement @ esm.js:195
iconButton @ button.stories.mdx:136
finalStoryFn @ story_store.js:578
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:43
jsxDecorator @ jsxDecorator.js:141
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ decorators.js:43
wrapper @ preview.js:217
(anonymous) @ make-decorator.js:31
(anonymous) @ make-decorator.js:45
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ decorators.js:43
wrapper @ withActions.js:189
(anonymous) @ make-decorator.js:31
(anonymous) @ make-decorator.js:45
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ hooks.js:275
storyFn @ story_store.js:620
prepareForInline @ config.js:19
storyFn @ Story.js:80
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
renderDocs @ StoryRenderer.js:424
renderStoryIfChanged @ StoryRenderer.js:270
renderCurrentStory @ StoryRenderer.js:191
(anonymous) @ StoryRenderer.js:119
(anonymous) @ index.js:196
handleEvent @ index.js:195
handler @ index.js:121
emit @ index.js:128
setSelection @ story_store.js:813
finishConfiguring @ story_store.js:436
ConfigApi.configure @ config_api.js:33
(anonymous) @ loadCsf.js:326
configure @ index.js:35
(anonymous) @ generated-stories-entry.js:5
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:5
__webpack_require__ @ bootstrap:848
fn @ bootstrap:150
0 @ main-menu.tsx:289
__webpack_require__ @ bootstrap:848
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.4ffbb4622fc364160e23.bundle.js:1
Show 32 more frames
react.development.js:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by InlineStory)
    in InlineStory (created by Story)
    in Story (created by Context.Consumer)
    in MDXProvider (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Story (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in div (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Canvas)
    in MDXProvider (created by Canvas)
    in Canvas (created by deprecated)
    in deprecated (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in MDXContent (created by page)
    in AddContext (created by page)
    in page
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in SourceContainer (created by DocsContainer)
    in DocsContainer
printWarning @ react.development.js:315
error @ react.development.js:287
createElementWithValidation @ react.development.js:1788
createElement @ esm.js:195
iconButton @ button.stories.mdx:136
finalStoryFn @ story_store.js:578
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:43
jsxDecorator @ jsxDecorator.js:141
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ decorators.js:43
wrapper @ preview.js:217
(anonymous) @ make-decorator.js:31
(anonymous) @ make-decorator.js:45
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ decorators.js:43
wrapper @ withActions.js:189
(anonymous) @ make-decorator.js:31
(anonymous) @ make-decorator.js:45
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ hooks.js:275
storyFn @ story_store.js:620
prepareForInline @ config.js:19
storyFn @ Story.js:80
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
renderDocs @ StoryRenderer.js:424
renderStoryIfChanged @ StoryRenderer.js:270
renderCurrentStory @ StoryRenderer.js:191
(anonymous) @ StoryRenderer.js:119
(anonymous) @ index.js:196
handleEvent @ index.js:195
handler @ index.js:121
emit @ index.js:128
setSelection @ story_store.js:813
finishConfiguring @ story_store.js:436
ConfigApi.configure @ config_api.js:33
(anonymous) @ loadCsf.js:326
configure @ index.js:35
(anonymous) @ generated-stories-entry.js:5
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:5
__webpack_require__ @ bootstrap:848
fn @ bootstrap:150
0 @ main-menu.tsx:289
__webpack_require__ @ bootstrap:848
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.4ffbb4622fc364160e23.bundle.js:1
Show 35 more frames
index.js:339 Uncaught TypeError: Cannot read property 'displayName' of undefined
    at getReactElementDisplayName (index.js:339)
    at parseReactElement (index.js:374)
    at index.js:390
    at Array.map (<anonymous>)
    at parseReactElement (index.js:389)
    at reactElementToJsxString (index.js:853)
    at jsxDecorator.js:101
    at mapSingleChildIntoContext (react.development.js:1149)
    at traverseAllChildrenImpl (react.development.js:1007)
    at traverseAllChildren (react.development.js:1092)
    at mapIntoWithKeyPrefixInternal (react.development.js:1174)
    at Object.mapChildren [as map] (react.development.js:1198)
    at renderJsx (jsxDecorator.js:98)
    at jsxDecorator (jsxDecorator.js:152)
    at hooks.js:247
    at decorators.js:36
    at decorators.js:43
    at wrapper (preview.js:217)
    at make-decorator.js:31
    at make-decorator.js:45
    at hooks.js:247
    at decorators.js:36
    at decorators.js:43
    at wrapper (withActions.js:189)
    at make-decorator.js:31
    at make-decorator.js:45
    at hooks.js:247
    at decorators.js:36
    at hooks.js:275
    at storyFn (story_store.js:620)
    at prepareForInline (config.js:19)
    at storyFn (Story.js:80)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at StoryRenderer.renderDocs (StoryRenderer.js:424)
    at StoryRenderer.renderStoryIfChanged (StoryRenderer.js:270)
    at StoryRenderer.renderCurrentStory (StoryRenderer.js:191)
    at Object.<anonymous> (StoryRenderer.js:119)
    at index.js:196
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (index.js:195)
    at handler (index.js:121)
    at Channel.emit (index.js:128)
    at StoryStore.setSelection (story_store.js:813)
    at StoryStore.finishConfiguring (story_store.js:436)
    at ConfigApi.configure (config_api.js:33)
    at Object.configure (loadCsf.js:326)
    at configure (index.js:35)
    at Object.<anonymous> (generated-stories-entry.js:5)
    at Object../.storybook/generated-stories-entry.js (generated-stories-entry.js:5)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.0 (main-menu.tsx:289)
    at __webpack_require__ (bootstrap:848)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.4ffbb4622fc364160e23.bundle.js:1
getReactElementDisplayName @ index.js:339
parseReactElement @ index.js:374
(anonymous) @ index.js:390
parseReactElement @ index.js:389
reactElementToJsxString @ index.js:853
(anonymous) @ jsxDecorator.js:101
mapSingleChildIntoContext @ react.development.js:1149
traverseAllChildrenImpl @ react.development.js:1007
traverseAllChildren @ react.development.js:1092
mapIntoWithKeyPrefixInternal @ react.development.js:1174
mapChildren @ react.development.js:1198
renderJsx @ jsxDecorator.js:98
jsxDecorator @ jsxDecorator.js:152
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ decorators.js:43
wrapper @ preview.js:217
(anonymous) @ make-decorator.js:31
(anonymous) @ make-decorator.js:45
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ decorators.js:43
wrapper @ withActions.js:189
(anonymous) @ make-decorator.js:31
(anonymous) @ make-decorator.js:45
(anonymous) @ hooks.js:247
(anonymous) @ decorators.js:36
(anonymous) @ hooks.js:275
storyFn @ story_store.js:620
prepareForInline @ config.js:19
storyFn @ Story.js:80
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
renderDocs @ StoryRenderer.js:424
renderStoryIfChanged @ StoryRenderer.js:270
renderCurrentStory @ StoryRenderer.js:191
(anonymous) @ StoryRenderer.js:119
(anonymous) @ index.js:196
handleEvent @ index.js:195
handler @ index.js:121
emit @ index.js:128
setSelection @ story_store.js:813
finishConfiguring @ story_store.js:436
ConfigApi.configure @ config_api.js:33
(anonymous) @ loadCsf.js:326
configure @ index.js:35
(anonymous) @ generated-stories-entry.js:5
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:5
__webpack_require__ @ bootstrap:848
fn @ bootstrap:150
0 @ main-menu.tsx:289
__webpack_require__ @ bootstrap:848
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.4ffbb4622fc364160e23.bundle.js:1
Show 39 more frames
react-dom.development.js:19527 The above error occurred in one of your React components:
    in Unknown (created by InlineStory)
    in InlineStory (created by Story)
    in Story (created by Context.Consumer)
    in MDXProvider (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Story (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in div (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Canvas)
    in MDXProvider (created by Canvas)
    in Canvas (created by deprecated)
    in deprecated (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in wrapper (created by MDXCreateElement)
    in MDXCreateElement (created by MDXContent)
    in MDXContent (created by page)
    in AddContext (created by page)
    in page
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in SourceContainer (created by DocsContainer)
    in DocsContainer

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 @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
renderDocs @ StoryRenderer.js:424
renderStoryIfChanged @ StoryRenderer.js:270
renderCurrentStory @ StoryRenderer.js:191
(anonymous) @ StoryRenderer.js:119
(anonymous) @ index.js:196
handleEvent @ index.js:195
handler @ index.js:121
emit @ index.js:128
setSelection @ story_store.js:813
finishConfiguring @ story_store.js:436
ConfigApi.configure @ config_api.js:33
(anonymous) @ loadCsf.js:326
configure @ index.js:35
(anonymous) @ generated-stories-entry.js:5
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:5
__webpack_require__ @ bootstrap:848
fn @ bootstrap:150
0 @ main-menu.tsx:289
__webpack_require__ @ bootstrap:848
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.4ffbb4622fc364160e23.bundle.js:1
Show 14 more frames
index.js:339 Uncaught TypeError: Cannot read property 'displayName' of undefined
    at getReactElementDisplayName (index.js:339)
    at parseReactElement (index.js:374)
    at index.js:390
    at Array.map (<anonymous>)
    at parseReactElement (index.js:389)
    at reactElementToJsxString (index.js:853)
    at jsxDecorator.js:101
    at mapSingleChildIntoContext (react.development.js:1149)
    at traverseAllChildrenImpl (react.development.js:1007)
    at traverseAllChildren (react.development.js:1092)
    at mapIntoWithKeyPrefixInternal (react.development.js:1174)
    at Object.mapChildren [as map] (react.development.js:1198)
    at renderJsx (jsxDecorator.js:98)
    at jsxDecorator (jsxDecorator.js:152)
    at hooks.js:247
    at decorators.js:36
    at decorators.js:43
    at wrapper (preview.js:217)
    at make-decorator.js:31
    at make-decorator.js:45
    at hooks.js:247
    at decorators.js:36
    at decorators.js:43
    at wrapper (withActions.js:189)
    at make-decorator.js:31
    at make-decorator.js:45
    at hooks.js:247
    at decorators.js:36
    at hooks.js:275
    at storyFn (story_store.js:620)
    at prepareForInline (config.js:19)
    at storyFn (Story.js:80)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at StoryRenderer.renderDocs (StoryRenderer.js:424)
    at StoryRenderer.renderStoryIfChanged (StoryRenderer.js:270)
    at StoryRenderer.renderCurrentStory (StoryRenderer.js:191)
    at Object.<anonymous> (StoryRenderer.js:119)
    at index.js:196
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (index.js:195)
    at handler (index.js:121)
    at Channel.emit (index.js:128)
    at StoryStore.setSelection (story_store.js:813)
    at StoryStore.finishConfiguring (story_store.js:436)
    at ConfigApi.configure (config_api.js:33)
    at Object.configure (loadCsf.js:326)
    at configure (index.js:35)
    at Object.<anonymous> (generated-stories-entry.js:5)
    at Object../.storybook/generated-stories-entry.js (generated-stories-entry.js:5)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.0 (main-menu.tsx:289)
    at __webpack_require__ (bootstrap:848)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.4ffbb4622fc364160e23.bundle.js:1

It seemed to me that my code was sound and so I tested this inside a tsx file inside the app i.e. outside of Storybook:

import { Button } from "../src/ui/atoms/button.tsx";
import { ReactComponent as Github } from "../src/ui/dinocons/brands/github-mark-small.svg";

<Button state="postive icon right">Icon on the right <Github /></Button>

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 Story

Expected behavior

It renders the button with the relevant text and SVG element

System:

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Firefox: 78.0.2
    Safari: 13.1.1
  npmPackages:
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.0-rc.26 => 6.0.0-rc.26
PN babel / webpack mdx question / support
Source
picture schalkneethling
👍2

Most helpful comment

I'm facing the same problem with the same setup (Storybook 6, CRA 3.4.3). My fix was to create an index file for our icons:

// /assests/icons/index.ts
export { ReactComponent as IconShare } from "./iconShare.svg";
export { ReactComponent as IconPotato } from "./IconPotato.svg";
// ...

and then use the re-exported version on my stories:

import { IconShare, IconPotato } from 'assets/images';

<Canvas>
  <Story name="icon" >
    {(args) => <Button  {...args} icon={<IconPotato />}/>}
  </Story>
</Canvas>
picture PupoSDC on 22 Oct 2020
❤2 🚀1

All 23 comments

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-renamed

Storybook 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?

schalkneethling picture schalkneethling on 6 Aug 2020

Update 2: I thought perhaps from within an arrow function call might be causing the problem and so tried:

<Canvas>
  <Story name="Icon button">
    {
      <Button state="positive icon right">
        Icon on right <Github />
      </Button>
    }
  </Story>
</Canvas>

The same end result though unfortunately.

schalkneethling picture schalkneethling on 6 Aug 2020

Apologies for all the comments folks, hopefully it is more useful than distracting.

Update 3: With the following:

## Icon buttons

When using an icon within a button you have the option of showing the icon either on the left or right of the label text.

#### Icon on the right

<Canvas>
  <Story
    name="Icon right button"
    args={{
      state: "positive icon right",
    }}
  >
    {(args) => (
      <Button {...args}>
        Icon on right <Arrow />
      </Button>
    )}
  </Story>
</Canvas>

#### Icon on the left

<Canvas>
  <Story
    name="Icon left button"
    args={{
      state: "positive icon left",
    }}
  >
    {(args) => (
      <Button {...args}>
        <Github /> Icon on right
      </Button>
    )}
  </Story>
</Canvas>

I now get a slightly different error in devtools:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `storyFn`.
    in storyFn
    in ErrorBoundary

and 

Uncaught TypeError: element.type is undefined
    getReactElementDisplayName index.js:339
    parseReactElement index.js:374
    childrens index.js:390
    parseReactElement index.js:389
    reactElementToJsxString index.js:853
    result jsxDecorator.js:101
    React 5
    renderJsx jsxDecorator.js:98
    jsxDecorator jsxDecorator.js:152
    hookify hooks.js:247
    defaultDecorateStory decorators.js:36
    defaultDecorateStory decorators.js:43
    wrapper preview.js:217
    decorator make-decorator.js:31
    makeDecorator make-decorator.js:45
    hookify hooks.js:247
    defaultDecorateStory decorators.js:36
    defaultDecorateStory decorators.js:43
    wrapper withActions.js:189
    decorator make-decorator.js:31
    makeDecorator make-decorator.js:45
    hookify hooks.js:247
    defaultDecorateStory decorators.js:36
    applyHooks hooks.js:275
    storyFn story_store.js:620
    React 16
    render render.js:84
    render render.js:83
    _callee$ render.js:173
    Babel 8
    renderMain render.js:146
    _callee$ StoryRenderer.js:370
    Babel 8
    renderStoryIfChanged StoryRenderer.js:280
    renderCurrentStory StoryRenderer.js:191
    setupListeners StoryRenderer.js:119
    handleEvent index.js:196
    handleEvent index.js:195
    handler index.js:121
    emit index.js:128
    setSelection story_store.js:813
    finishConfiguring story_store.js:436
    configure config_api.js:33
    loadCsf loadCsf.js:326
    configure index.js:35
    js generated-stories-entry.js:5
    js main.b72c3840c569fb8f4544.bundle.js:116
    Webpack 7
schalkneethling picture schalkneethling on 6 Aug 2020

do you have the appropriate loaders set up to load your SVGs as React elements?

shilman picture shilman on 7 Aug 2020

do you have the appropriate loaders set up to load your SVGs as React elements?

The app is based on CRA which does have the relevant loaders. I assumed(perhaps incorrectly) that Storybook is simply reusing these in the build pipeline?

schalkneethling picture schalkneethling on 7 Aug 2020

aha, didn't realize that was built into CRA. do you have the CRA preset installed?

shilman picture shilman on 7 Aug 2020

aha, didn't realize that was built into CRA. do you have the CRA preset installed?

Yup - https://github.com/mdn/yari/blob/mdn-fiori/package.json#L78

Here is the CRA info - https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

schalkneethling picture schalkneethling on 7 Aug 2020

cc @mrmckeb

shilman picture shilman on 9 Aug 2020

Hi @schalkneethling, this is working in our tests - you can see here that Button contains an SVG - but it may be something related to your environment. I haven't checked out the project locally, but I had a quick look at this:
https://raw.githubusercontent.com/mdn/yari/mdn-fiori/client/src/ui/docs/atoms/button.stories.mdx

I can't actually see where "../../dinocons/arrows/arrow.svg" is supposed to come from. It isn't in this directory: https://github.com/mdn/yari/tree/mdn-fiori/client/src/ui/docs/dinocons

Perhaps there's something not committed to the project? Or perhaps I need to run it locally and build something first?

mrmckeb picture mrmckeb on 10 Aug 2020

@mrmckeb Thank you for taking a look. The source might have changed since I opened the PR but, let me double-check this locally.

schalkneethling picture schalkneethling on 10 Aug 2020

Hey @mrmckeb @shilman, I am still experiencing this in Storybook v6.0.6 unfortunately. Inside an mdx file I have for example:

import { ReactComponent as Arrow } from "@mdn/dinocons/arrows/arrow.svg";

<IconGallery>
  <IconItem name="arrow">
    <Arrow />
  </IconItem>
</IconGallery>

The above resolves just fine i.e. no error of a reference error when starting up Storybook
The same error is thrown in devtools though.

When I do the same inside a stories.js file, everything works fine. However, if I then try to import and use IconGallery or IconItem inside this file, I get the error as reported here: https://github.com/storybookjs/storybook/issues/12016

schalkneethling picture schalkneethling on 14 Aug 2020

I have pushed the latest to code to the repo. You can see the two files here:
https://github.com/mdn/yari/tree/1e120a3317a4203c01dcaf58ed926f6efee9f47f/client/src/ui/docs/dinocons

The mdx example fails as explained but the js works as expected, unless I try to use either IconGallery or IconItem

schalkneethling picture schalkneethling on 14 Aug 2020

In the following commit I found a workaround:
https://github.com/mdn/yari/tree/54037b63ab1cd00ac1e77fc0bee15a988a16b98c/client/src/ui/docs/dinocons

schalkneethling picture schalkneethling on 14 Aug 2020

I'm having the same issue. Just upgraded to v6 and every story that imports an SVG file has a scary Element type is invalid error. Also using CRA.

benknight picture benknight on 26 Aug 2020

@benknight are you also using MDX?

shilman picture shilman on 26 Aug 2020

@shilman I have not. Admittedly I haven't dug very deep into this. Basically I upgraded to v6, removed the CRA add-on, and ran storybook, then saw the errors only on components that import svgs as ReactComponent

benknight picture benknight on 26 Aug 2020

Ok, was only asking because it looks like it's working for @schalkneethling in JS files and only broken in MDX (which is a little weird)

shilman picture shilman on 26 Aug 2020

@shilman my bad, I misread the upgrade guide and thought I had to remove @storybook/preset-create-react-app. No more issues.

benknight picture benknight on 27 Aug 2020
❤1

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] picture stale[bot] on 20 Sep 2020

I am facing same issue. Using mdx file for CRA app.

jimishshah picture jimishshah on 28 Sep 2020

@jimishshah do you have the CRA preset installed?

shilman picture shilman on 28 Sep 2020

Update: I have switched to using .js and CSF so I am no longer "blocked" by this but, last I tried, it still failed for me(with @storybook/preset-create-react-app).

schalkneethling picture schalkneethling on 30 Sep 2020

I'm facing the same problem with the same setup (Storybook 6, CRA 3.4.3). My fix was to create an index file for our icons:

// /assests/icons/index.ts
export { ReactComponent as IconShare } from "./iconShare.svg";
export { ReactComponent as IconPotato } from "./IconPotato.svg";
// ...

and then use the re-exported version on my stories:

import { IconShare, IconPotato } from 'assets/images';

<Canvas>
  <Story name="icon" >
    {(args) => <Button  {...args} icon={<IconPotato />}/>}
  </Story>
</Canvas>
PupoSDC picture PupoSDC on 22 Oct 2020
❤2 🚀1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tirli picture tirli  路  3Comments
xogeny picture xogeny  路  3Comments
ZigGreen picture ZigGreen  路  3Comments
sakulstra picture sakulstra  路  3Comments
rpersaud picture rpersaud  路  3Comments