yamoo9
commented
1 year ago 문제 원인
@SeoMiYoung 님. React 앱(with Webpack)에 설정된 SVGR 로더 설정이 Storybook 앱에는 설정되어 있지 않기 때문입니다. 😥
문제 해결
Storybook main.ts 구성 파일에 SVGR 사용을 위한 Webpack 구성을 확장해야 합니다.
그러면 Storybook에서도 SVGR을 사용할 수 있습니다. 오늘 이슈가 상당히 많이 올라와서 직접 테스트는 못해봤습니다.
팀 내에서 Webpack 구성한 팀원과 논의한 후 반영해보세요. 😃
import * as path from 'path';
export default {
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.svg$/i,
oneOf: [
{
dependency: { not: ['url'] },
use: [
{
loader: '@svgr/webpack',
options: {
titleProp: true,
svgo: true,
},
},
'new-url-loader',
],
},
{
type: 'asset/resource',
generator: {
filename: 'static/[name].[contenthash][ext][query]',
},
parser: {
dataUrlCondition: 4 * 1024,
},
},
],
});
return config;
},
};
SeoMiYoung
질문 작성자
서미영
문제 상황
안녕하세요. 저는 현재 마켓칼리중에서 상품문의 파트에 대해 구현하고 있습니다.
대충 틀을 만들고, 스토리북을 통해(명령어: npm run storybook)서 확인해보았더니,
위와 같이, ProductInquiry부분을 확인하라는 에러가 떴습니다.
npm start를 통해서 확인했을때는
위와 같이 에러가 뜨지 않고, 문제없이 화면에 보여집니다.
그래서 어떤 문제때문에 스토리북에서 저런 에러가 발생했는지 궁금해서 여러번 주석을 쓰고 지우면서 확인해보니 ProductInquiry.jsx에서 Lock을 사용했는데,
위의 사진에서 Lock 을 사용한 81번째 줄을 주석처리하면 스토리북에서 문제없이 잘 돌아가는것을 확인할 수 있었습니다.
리액트에서 svg를 사용하기 위해서 저는 ProductInquiry.jsx에서 코드 상단부분에 import { ReactComponent as Lock } from '@/assets/product-detail/ic-lock.svg'; 이렇게 import시켜서 사용하고 있는데요,
Lock을 뭔가 잘못사용했기 때문에 스토리북에서 에러가 난건 알겠는데, 원인과, 왜 npm start를 하면 화면에 문제없이 보여지는데, 스토리북을 통해 보면 에러가 발생한건지 궁금합니다.
답변해주시면 감사하겠습니다.
프로젝트 저장소 URL
https://github.com/SeoMiYoung/project-repo 브랜치 정보: feat/#96
환경 정보
운영체제 정보: 윈도우 Node.js 정보: v18.14.0