Storybook webpack not configured for Create React App 2.0 Inline SVG's

[semb09]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I recently upgraded to Create React App 2.0 so that I could use the new SVG import feature

import { ReactComponent as Icon } from 'icon.svg';

I then realised that this is provided via react-scripts webpack config and that Storybook has its own config. I then updated to the latest alpha version of Storybook but it still did not work.

I managed to get the feature to work by adding the following to storybook webpack config file

const path = require('path');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());

module.exports = (baseConfig, env, defaultConfig) => {
  // Extend defaultConfig as you need.

  defaultConfig.module.rules.push({
    test: /\.(js|jsx)$/,
    include: path.resolve(appDirectory, 'src'),
    loader: require.resolve('babel-loader'),
    options: {
      presets: [require.resolve('babel-preset-react-app')],
      plugins: [
        [
          require.resolve('babel-plugin-named-asset-import'),
          {
            loaderMap: {
              svg: {
                ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
              },
            },
          },
        ],
      ]
    }
  });

  return defaultConfig;
};

Will this config be included in future Storybook updates?

Steps to reproduce

• Create React App 2.0
• Add Storybook
• Use import { ReactComponent as Icon } from 'icon.svg'; syntax inside any component in a story

(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react ^4.0.0-alpha.24

[HerbCaudill]

+1

I ran into this as well, and @semb09's webpack config solved the problem.

For anyone else coming across this, I also needed to add the referenced packages to my vanilla CRA+Storybook app:

yarn add -D babel-loader, babel-preset-react-app, babel-plugin-named-asset-import, @svgr/webpack

[igor-dv]

I can relate it to #4306 as well.

IMO, we need to support as much as possible for CRA2 compatibility.

Does anyone want to take this as a PR?

[Itrulia]

So I am trying to get this to work with typescript.

// webpack.config.js

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve.extensions.push(".ts", ".tsx");

  storybookBaseConfig.module.rules[0].test = /\.(mjs|jsx?|tsx?)$/;
  storybookBaseConfig.module.rules[0].use[0].options = require("./babel.config");

  return storybookBaseConfig;
};

// babel.config.js
module.exports = {
  presets: [
    require.resolve("babel-preset-react-app"),
  ],
  plugins: [
    [
      require.resolve("babel-plugin-named-asset-import"),
      {
        loaderMap: {
          svg: {
            ReactComponent: "@svgr/webpack?-prettier,-svgo![path]",
          },
        },
      },
    ]
  ]
};

This will result in a warning like this

WARNING in ./src/icons/social/youtube/youtube.story.tsx 6:29-36
"export 'ReactComponent' (imported as 'Youtube') was not found in '@svgr/webpack?-prettier,-svgo!./youtube.svg'
 @ ./src sync .story.tsx$
 @ ./config/storybook/config.tsx
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./config/storybook/config.tsx ./node_modules/webpack-hot-middleware/client.js?reload=true

import is: import {ReactComponent as Youtube} from "./youtube.svg";

What am I missing?

[shilman]

Released in alpha: https://github.com/storybooks/storybook/releases/tag/v4.1.0-alpha.8

[Itrulia]

This does not work for me. Still getting the same warning/error:

WARNING in ./src/icons/social/youtube/youtube.story.tsx 6:29-36
"export 'ReactComponent' (imported as 'Youtube') was not found in '@svgr/webpack?-prettier,-svgo!./youtube.svg'
 @ ./src sync .story.tsx$
 @ ./config/storybook/config.tsx
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./config/storybook/config.tsx ./node_modules/webpack-hot-middleware/client.js?reload=true

this is the story:

import React from "react";
import { IconStories } from "../../icons.story";
import { ReactComponent as Youtube } from "./youtube.svg";

IconStories.add("Youtube", () => <Youtube />);

[igor-dv]

Do you have a reproduction?

[Itrulia]

Unfortunately was not able to reproduce it. But thats great.
I will investigate and let you know what caused it.

[Itrulia]

Okay, so I was able to reproduce it by having:

//webpack.config.js
module.exports = (storybookBaseConfig, configType) => {

  return storybookBaseConfig;
};

In the config directory.

Repo: https://github.com/Itrulia/storybook-svg-import-problem

[igor-dv]

@Itrulia do you use CRA2? I wonder why would you create a custom webpack config, since we support now TS and svgr out of the box for CRA2 users.

[Itrulia]

Yes, I am.

Because I need more than CRA gives me so I override the config (I don't eject, override it ala https://github.com/timarney/react-app-rewired). Atleast with #4902 being merged I don't need to override it for Storybook.

[igor-dv]

Do you have a react-scripts somewhere in your node_modules ? We are applying rules from CRA when this package is listed.

[Itrulia]

Yes, you can checkout the repo I linked earlier.

[igor-dv]

Ok, so the problem is that you should use defaultConfig and not basicConfig:

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
    return defaultConfig;
};

default config has a rulse for svg, that is needed for SVGR later.

[Itrulia]

Oh... This works great!

Thanks and sorry for wasting your time!

[igor-dv]

Linking the #4903 here.

[shirbr510]

I'm currently getting an error regarding my inline svgs from storybook with CRA 2.0.5 and don't have an exposed webpack.config.

which version of storybook is this supported from?

update

nvm, I was using storybook 4.0.2 and now after upgrading to 4.1.2 it works