스토리북 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]',
},
},
// ...
따라서, 스토리북에서 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
를 없애는 작업을 먼저 해줘야 한다고 했지만, 이렇게 해도 작동은 된다.
참고