Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:6
  • Comments:31 (8 by maintainers)

github_iconTop GitHub Comments

4reactions
PupoSDCcommented, Oct 22, 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>
1reaction
declanramsaycommented, Aug 10, 2021

@geocine you also can do

 webpackFinal: async (config, { configType }) => {
    config.module.rules.unshift({ test: /\.svg$/, use: ['@svgr/webpack', {
        //custom options, like you do in the webpack config
      }] });

    // Return the altered config
    return config;
  },

The trick with the match was only to reuse the existing configuration from storybook. It’s not necessary and could not work in this case.

This also broke my build, along with all the other workarounds except creating a separate file for importing svgs as @PupoSDC suggested, same story (Storybook 6.1, CRA 4, using mdx).

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Storybook SVG Failed to execute 'createElement' on ...
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.
Read more >
react-dom.development.js:18687 the above error occurred in ...
react.js the above error occurred in the <div> component (there is no error above) ... SVG as React component inside Story causes error...
Read more >
How to use SVGs in React | Sanity.io guide
There are a few ways to use an SVG in a React app: Use it as a regular image; Import it as a...
Read more >
Building SVG Components with React.js and d3.js - pganalyze
Learn how to use SVG with React and d3, what SVG is, when to use it, handling, sizing, styling, layouting and interactivity in...
Read more >
React SVG: How to use SVGs best in React - CopyCat Blog
How to use SVG as a Background Image? Importing SVG in React as JSX. Importing SVGs as React Component. How to convert SVG...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

addon-controls argTypes date returns UNIX timestamp exclusively

Next page

Display of Template inside Story not as expected