Why doesn't storybook use the same webpack config as in the project?

user_5343511 0
Viewed 361

I have been using storybook for a while now but I still couldn't understand the reason behind storybook has its own webpack config.

For example, if I config an absolute path in tsconfig.json, I have to do the same thing for storybook.

Or if I want to use a loader for a file type, I have to do it again for storybook and it's kind of annoying.

Can anyone explain this or how did you overcome this hassle in your previous projects?

storybook webpack reactjs
2 Answers

@nishkaush I have to post a comment for you to read. So I did resolve that (loader for svg) even it took a lot of my time. Take a look if you're interested.

webpackFinal: async (config) => {
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test && rule.test.test('.svg'),
    )
    fileLoaderRule.exclude = /\.svg$/

    config.module.rules.push({
      test: /\.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    })

    return config
  },

You can put that in your storybook webpack config (main.js)

And this one for project webpack config:

webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    })

    return config
  },

Don't forget to install @svgr/webpack

user_53435110

I was having the same issue today. Storybook's webpack config uses SVG-loader whereas my webpack config uses file-loader.

So, even though using an SVG as an img's src worked for my project, it didn't work for Storybook.

Really annoyed me.

Had to re-write all my icons that were using img tag to use inline SVG. Wasted Afternoon!

user_73520200
Related