스토리북 SVG undefined 에러

2020-09-24

Storybook에서 SVG 파일을 컴포넌트로 렌더하면 undefined가 뜬다.

에러가 나는 코드

import React from 'react'
import { ReactComponent as SVGFile } from './example.svg'

console.log(SVGFile) // undefined

에러 화면

Storybook: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

화면 렌더 자체가 불가하다

이는 스토리북의 기본 webpack 설정에 이미 file-loader로 svg를 변환하고 있기 때문에 나는 에러이다.

storybook/preview/base-webpack.config.js

// ...
{
  test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
  loader: require.resolve('file-loader'),
  query: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
// ...

전문: storybook base-webpack.js

따라서, 스토리북에서 svg import가 기본 file-loader 설정보다 먼저 실행해야 하기 때문에 unshift로 넣어주면 된다.

해결법

$ npm install @svgr/webpack --save-dev

./storybook/main.js

// ...
module.exports = {
 // ...
  webpackFinal: async config => {
    // ...
    config.module.rules.unshift({
      test: /\.svg$/,
      use: [‘@svgr/webpack’],
    });
    // ...
    return config;
  }
}

어떤 사람은 기존의 file-loader 설정에서 svg를 없애는 작업을 먼저 해줘야 한다고 했지만, 이렇게 해도 작동은 된다.


참고