Storybook: 5.0.0 not supporting images

[Ziv-Barber]

Describe the bug
Version 4.1.3 allowing using images in stories:

import myImage from './circuit.png'

<img src={myImage} />

I do had to setup .storybook/webpack.config.js (I just copied the rules from my normal webpack file) but it worked.

After upgrading to 5.0.0 all the images become broken.

To Reproduce
My .storybook/webpack.config.js file:

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // Transform all .js files required somewhere with Babel
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
          // options: options.babelQuery
        }
      },
      {
        // Preprocess our own .css files
        // This is the place to add your own loaders (e.g. sass/less etc.)
        // for a list of loaders, see https://webpack.js.org/loaders/#styling
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader']
      },
      {
        // Preprocess 3rd party .css files located in node_modules
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader'
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false
              },
              optipng: {
                optimizationLevel: 7
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              }
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      }
    ]
  }
}

Expected behavior
To be able to see images like it was working in 4.1.3

System:

• OS: Windows10
• Browser: chrome
• Framework: react
• Version: 5.0.0 vs 4.1.3

[shilman]

Related https://github.com/storybooks/storybook/issues/5708

[andrii-melnyk-ring]

I think it is because storybook merges it's own webpack rules with specified by you.

I use full control mode (when I'm exporting a function) and can change base config to remove rules for css and images to enable my own rules:
config.module.rules = config.module.rules.filter(rule => { const ruleTestStr = rule.test.toString(); return ruleTestStr !== '/\\.css$/' && ruleTestStr !== '/\\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\\?.*)?$/'; })
And then I'm pushing project's properties.

[mts]

I came across the same issue @Ziv-Barber reported when upgrading from Storybook ^3.4.11 to ^5.0.1 and what @andrii-melnyk-ring suggests does indeed offer a workaround.

I still think that it might be a regression since filtering config.module.rules was not necessary before v5 and the purpose of the custom storybook webpack configuration is to overwrite the Storybook base configuration.

On the other hand, in my case it is possible that changing base config using module.rules.push instead of re-assigning used to work although it was not supposed to and maybe it's fixed in v5. That's what I encountered and had to tackle. Now it works.

[pascalduez]

Same issue for CSS modules, having two rules for .css doesn't work out of the box.
So I had to remove the base one.

module.exports = ({ config, mode }) => {
  config.module.rules = config.module.rules.filter(
    rule => rule.test.toString() !== '/\\.css$/'
  );

  config.module.rules.push({
    test: /\.css$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          localIdentName: '[name]-[local]_[hash:base64:5]',
          importLoaders: 1,
        },
      },
      {
        loader: 'postcss-loader',
      },
    ],
  });

  return config;
};

[elie222]

I have this same issue, but using @andrii-melnyk-ring workaround still gives me the same error of TS2307: Cannot find module './header-background.svg'.

[shilman]

Yee-haw!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.7 containing PR #6104 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

5.1.0-alpha.7 restores 4.x "extend mode" webpack behavior but also deprecates it. It should fix your problem @Ziv-Barber. I'll patch it back into 5.0.x once it's been verified by a few people.

[elie222]

Still having issues importing SVGs.

[shilman]

@elie222 i added a --debug-webpack CLI flag so you can see the final preview webpack config. How many rules do you have that match SVG?

[elie222]

Just one. Does it make sense for me to open a new issue with a reproduction?

I am loading the svg files in my tsx files, and not in Storybook directly. Does this have an impact? The error I get each time is:

TS2307: Cannot find module './close.svg'

The import code is:

import closeIcon from "./close.svg"

It works fine with my Gatsby site, but not with Storybook.

[shilman]

@elie222 Yeah let's open a separate issue if you don't mind. AFAIK we've fixed the systemic webpack problems from the v5 release (regression on extend-mode config). I think (hope!) your issue is simply a "configuring webpack" issue, and we'll try to help you get that sorted out.

Just to verify, is your original PNG loading issue fixed? https://github.com/storybooks/storybook/issues/6076

[haldenl]

@pascalduez Your solution worked for me. Thank you!

[BrianCortes]

In my case with "@storybook/react": "^5.1.10", I have a component that import a image (.png)
My custom webpack.config.js is :

      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // [email protected]
              disable: true, // [email protected] and newer
            },
          },
        ],
      },

It works for me 🤟🏼

[dilnara]

"@storybook/react": "^5.1.11" and having exactly the same issue with png images.

[dilnara]

https://ton-storybook.firebaseapp.com/?path=/story/actions--buttonicon here you can inspect any item, for example empty blue square button (left-top). You can easily see the following inside:

< img alt="" draggable="false" src="https://ton-storybook.firebaseapp.com/static/media/ico-triangle.6494414b.png" class="css-9pa8cd" >

the image by link is accessible, but there's no any image on button in story... Why?

Important: I use react-native-web.

import someImage from 'path/to.image.png';

If I use react's usual <img src={someImage}/> then img is shown.
If I use web-react-native's <Image source={someImage}/> then img is NOT shown.

[dilnara]

Ok, I got it. The problem is that react-native-web-image-loader or url-loader aren't working, they break images (why?.....). So, in webpack I use image-webpack-loader which isn't suitable for react-native-web's Image source format....

So, how can I use url-loader or react-native-web-image-loader with Storybook?

[vanoMekantsishvili]

@elie222 hello, did you make it work? I am struggling to load svgs, I've tried almost every kind of loader, file-loader, url-loader, svg-inline-loader but without any luck. If you fixed it, Please provide your working code. Thank you.

[elie222]

Hey,

I think I did. Take a look at this:
https://github.com/elie222/elie-tech/blob/master/.storybook/webpack.config.js

Here's the deployed Storybook:
https://storybook.elie.tech

Some images don't load in the Storybook, but I think that may be a different issue. The icons I have in my project do load (for example, the heart icon).

[gpawlik]

@elie222 what do you mean by "some images"? Is there a certain filetype that does load and other that does not?

[danieloi]

The solution for me was to lowercase the image extension for one of my pictures from 'JPG' to 'jpg'

[nocarroll]

In case someone ends up here with a similar setup to mine, what worked in my case was simply removing the custom webpack rule for loading images with file-loader

Before

// webpack.custom.js
rules: [
        {
            test: /\.sass$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../')
        },
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: 'less-loader',
                    options: {
                        javascriptEnabled: true
                    }
                }
            ]
        },
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        disable: true
                    }
                }
            ]
        }
    ]

After

// webpack.custom.js
rules: [
        {
            test: /\.sass$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../')
        },
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: 'less-loader',
                    options: {
                        javascriptEnabled: true
                    }
                }
            ]
        }
    ]

This custom rule was necessary when I was running Storybook 3.4.11 but in 5.x.x it seems to be defined in the base config so it is not required in the custom config.