Storybook v6 にてSVGの読み込みと絶対パスでインポートする

Storybook v6環境にて、SVGファイルを絶対パスで読み込もうとしたら下記のようなエラーが出ました。

ERROR in ./src/components/Button.tsx
Module not found: Error: Can't resolve 'src/assets/icons/button.svg' in '/Users/****'
 @ ./src/components/Button.tsx 10:0-79 25:22-44
 @ ./src/components/Button.stories.tsx

Storybook v6でWebpackの設定をオーバーライドするにはwebpackFinalでconfigを書き加えます。

https://storybook.js.org/docs/react/configure/webpack

結果的に絶対パスで読み込んでいるのでそれを相対パスにすれば直りました。今回はsrc/ディレクトリをルートにします。.storybook/main.jsを下記のように編集します。main.jsからの相対パスなので../srcという指定のしかたになっています。

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: config => { 
    // SVGの読み込み
    fileLoaderRule.exclude = /\.svg$/;  

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

    // 絶対パスでインポートするためにaliasを設定
    config.resolve.alias = {
      ...config.resolve.alias,
      src: path.resolve(__dirname, '../src'),
    };

    return config;
  } 
}