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

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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 9
Comments: 32 (8 by maintainers)

Most upvoted comments

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 on Oct 22, 2020

I’m not sure if I had exactly the same issue but I modified the webpack config like in the doc and I was able to display any svg using @svgr/webpack:

Icon import: import { ReactComponent as IconShare } from "./iconShare.svg";

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config, { configType }) => {
    const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
    const assetLoader = {
      loader: assetRule.loader,
      options: assetRule.options || assetRule.query,
    };
    config.module.rules.unshift({ test: /\.svg$/, use: ['@svgr/webpack', assetLoader] });

    // Return the altered config
    return config;
  },
};

darkship on Jan 4, 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).

declanramsay on 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.

darkship on Jan 31, 2021

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

benknight on Aug 27, 2020