[React+Typescript] Storybook 에러 해결법 - element type is invalid

storybook을 작성하다 이런 에러를 마주쳤다면 원인은 두 가지 중 하나입니다.

1. 컴포넌트 경로를 제대로 설정 하지 않은 경우

컴포넌트 경로가 잘못되진 않았는지 체크해주세요!

✅ export default로 내보내고 있는 component는 중괄호 없이 가져오고 있는지 확인할 것

=> import Component from './Component';

✅ export로 내보내고 있는 component는 중괄호를 포함하여 import 하고 있는지 확인할 것

=> import { Component } from './Component';

 

2. 스토리북에서 svg를 제대로 못 읽어오는 경우

아무리 봐도 컴포넌트 경로를 제대로 설정했다면, 스토리북 자체에서 svg를 제대로 읽어오지 못하는 것이 원인일 수 있습니다.

 

 

svg 못읽어오는 경우 해결방법

webpack.config.js 파일 추가하기

.storybook 폴더에

webpack.config.js 파일을 생성하고 다음과 같이 작성해줍니다.

// webpack.config.js
module.exports = async ({ config }) => {
    const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack", "url-loader"],
    });
    return config;
  };

 

해결 완료! 🙌