reactjstypescriptwebpackstorybook

Serving static files in "storybook js"


I am using storybook documentation and couldn't load images from assets folder. As documentations says: "if you are using a custom Webpack config, you need to add the file-loader into your custom Webpack config" - and my webpack.config file looks like:

const path = require('path');


 module.exports = ({ config }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
 config.module.rules.push({
   test: /\.(ts|tsx)$/,
   use: [
     {
       loader: require.resolve('awesome-typescript-loader'),
     },
   ],
 });
 config.module.rules.push({
   test: /\.(svg|png|jpe?g|gif)$/i,
   use: [
     {
       loader: 'file-loader',
     },
    ]
  },);

  config.resolve.extensions.push('.ts', '.tsx')


  return config;
};

package.json:

"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"

This is after yarn storybook webpack-debug

seems like something is missing from storybooks documentation, or I am doing something wrong :? thank you whoever can help me out with this problem. ^_^


Solution

  • If someone come across same problem, try code below (I am using: storybook, react - without create react app, typescript) :

    First issue was about typescript and here is what worked for me: I created custom.d.ts file in root folder and put this code inside:

    declare module "*.svg" {
      const content: string;
      export default content;
    }
    
    declare module "svg-inline-react" 
    

    Then I add this file inside tsconfig.json like this:

    "files": [
      "./custom.d.ts"
    ],
    

    After that, error - "could't find imageName.svg" disappeared, but svg-inline-react still didn't show icon, now problem was inside 'webpack.config.js' file, fixed code is written below.

    const path = require('path');
    
    module.exports = ({ config }) => {
    
      config.module.rules = config.module.rules.map( data => {
        // This overrides default svg rouls of storybook, and after that we can use 
       //svg-inline-loader.
        if (/svg\|/.test( String( data.test ) ))
          data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani) 
     (\?.*)?$/;
        return data;
      });
    
        config.module.rules.push({
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
          });
        config.module.rules.push({
          test: /\.(ts|tsx)$/,
          use: [
            {
              loader: require.resolve('awesome-typescript-loader'),
            },
          ],
        });
        config.module.rules.push({
          test: /\.svg$/,
          include: path.resolve(__dirname, '../'),
          loader: 'svg-inline-loader'
        });
    
        config.resolve.extensions.push('.ts', '.tsx')
        return config;
    };
    

    ^_^