TypeScript ‘ReactComponent’ 멤버는 내보내지지 않았습니다 오류 문제 해결

TypeScript 오류 해결: Module ‘*.svg’의 ‘ReactComponent’ 멤버는 내보내지지 않았습니다

리액트 프로젝트에서 TypeScript를 사용하다가 Module '*.svg'의 'ReactComponent' 멤버는 내보내지지 않았습니다 라는 오류 메시지를 마주하면 안심하세요! 이 문제는 코드를 몇 가지 조정하여 해결할 수 있습니다.

1. 파일 임포트를 확인하세요

먼저, SVG 파일의 임포트 문이 올바른지 확인하세요. 리액트 문서에 따르면, 임포트는 다음과 같아야 합니다:

import { ReactComponent as Icon } from './Icon.svg';

파일 경로가 정확하고 SVG 파일의 위치와 일치하는지 확인하세요.

2. 사용자 정의 타입 선언을 업데이트하세요

다음 단계는 사용자 정의 타입 선언 파일(custom.d.ts)을 업데이트하여 ‘ReactComponent’ 멤버를 올바르게 내보내는 것입니다.

// custom.d.ts

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

TypeScript 버전 3.0 이상을 사용하는 경우, 함수 컴포넌트의 타입을 React.FunctionComponent로 변경해야 합니다.

3. tsconfig.json 파일을 구성하세요

tsconfig.json 파일을 업데이트하여 사용자 정의 타입 선언 파일을 포함시키세요:

// tsconfig.json

{
    ...
    "include": [
        "custom.d.ts"
    ]
}

사용자 정의 선언 파일을 include 배열에 추가함으로써, TypeScript는 컴파일 과정에서 해당 파일을 인식하고 포함시킵니다.

결론

TypeScript에서 SVG 파일을 리액트 컴포넌트로 임포트하는 것은 때로는 Module '*.svg'의 'ReactComponent' 멤버는 내보내지지 않았습니다라는 오류 메시지가 나타날 수 있습니다. 위에서 제시한 문제 해결 단계를 따라가면 이 문제를 해결하고 SVG 파일을 리액트 컴포넌트에서 성공적으로 임포트하고 사용할 수 있습니다.

파일 임포트를 두 번 확인하고, 사용자 정의 타입 선언 파일을 업데이트하고, tsconfig.json 파일을 위해 구성하세요. 이러한 조정을 통해, TypeScript와 리액트 프로젝트에서 신속하게 SVG 파일을 활용할 수 있게 됩니다.

참고 자료 :

https://stackoverflow.com/questions/54121536/typescript-module-svg-has-no-exported-member-reactcomponent

같은 카테고리의 다른 글 보기 :

reactjs