storybook에서 svgr 웹팩 설정이 동작하지 않을 때

😥  문제상황

---

storybook은 file-loader가 기본 설정으로 되어 있어서 @svgr/webpack을 설정하고 싶은 경우에는 main.js에서 unshift를 사용해 웹팩 설정을 해주어야 한다.

    config.module.rules.unshift({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

next.js에서 storybook을 설치하고 @svgr/webpack을 설정해줄 때는 잘 동작했었는데, cra에서 storybook을 설치하고 @svgr/webpack을 설정하려니 동작하지 않았다.

 

🔨  해결책

---

@svgr/webpack 대신에 babel-plugin-inline-react-svg을 사용하였다.

이 경우에는 main.js에서 설정하는 방식이 웹팩과 달라진다.

// .storybook/main.js
module.exports = {
  babel: async (options) => {
    options.plugins.push("babel-plugin-inline-react-svg");
    return options;
  },
}

다만 이 방법의 문제점은 url-loader를 설정할 수 없어 무조건 ReactComponent로 svg파일을 가져와야 한다는 것이다.