storybook에서 svg 오류 개선

Failed to execute 'createElement' on ... 오류가 났을 때, 아래의 순서대로 진행하면 된다.

 

1. @svgr/webpack 설치

yarn add -D @svgr/webpack

// or

npm install --save-dev @svgr/webpack

 

2. d.ts 파일에 코드 추가

원래 d.ts 파일에 `declare module '*svg' 만 있었는데 아래 코드를 추가해 주었다. 

// assets.d.ts 
declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

 

 

3. Storybook main.ts 파일에 코드 추가

interface RuleSetRules {
  test: RegExp;
  use?: RuleSetUseItem[];
  exclude?: RegExp;
}

...

webpackFinal: async (config: Configuration) => {
    const { module, resolve } = config;
    const imageRule = module?.rules?.find((rule) => {
      const test = (rule as RuleSetRules).test;

      return test.test('.svg');
    }) as RuleSetRules;

    imageRule.exclude = /\.svg$/;

    module?.rules?.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    ...

    return config;
}

 

이렇게만 하면 끝이다!