[RN] react-native 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.' 에러잡기

🐰: 와 진짜 날 진땀빼게 한 에러였다.. 3일을 고생했다 부들..

도대체 어디가 에러인지 모르고 애꿏은 modules만 지웠다 설치했다..

아예 모든걸 지우고 react-native init부터 다시 하기도 했다..

하.................💨

 

결국 코드 한줄씩 주석처리 해보면서 svg파일이 문제인걸 찾았다.

근데 도대체 왜? 며칠 전까지만 해도 잘 되던 것들인데....

 

또 하루종일 svg와 관련된 파일들만 설치하고 난리부르스......ㅋㅋ

진짜 울기 직전에 나타난 새로운 글... 역시 사람은 검색을 잘해야 한다....

참고한 글들은 아래에 링크걸어두기로 하고..

 

발생원인

react-native 버전이 업그레이드 되고나서 발생하는 에러이다.

나의버전: "react-native": "0.75.2"

 

해결방법 ts-jest 라이브러리 사용

 

1. ts-jest 라이브러리 설치

npm install --save-dev ts-jest
# or
yarn add --dev ts-jest

 

2. jest.config.js 파일 수정

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.svg$': 'jest-svg-transformer',
  },
};

 

3. babel.config.js 파일에 plugins 추가

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
    'react-native-reanimated/plugin',
    'react-native-svg-transformer',
  ],
};

 

4.svg 파일을 .tsx 파일로 제작

import * as React from 'react';
import { SVGProps } from 'react';
import { Svg, Path } from 'react-native-svg';

const EyeOpen = (props: SVGProps<SVGSVGElement>) => (
  <Svg xmlns="http://www.w3.org/2000/svg" fill="none" {...props}>
    <Path
      fill="#7F7F7F"
      d="M2.2 24S0 24 0 22s2.2-8 11-8 11 6 11 8-2.2 2-2.2 2H2.2ZM11 12c1.75 0 3.43-.632 4.667-1.757C16.905 9.117 17.6 7.59 17.6 6c0-1.591-.695-3.117-1.933-4.243C14.429.632 12.75 0 11 0S7.57.632 6.333 1.757C5.095 2.883 4.4 4.41 4.4 6c0 1.591.695 3.117 1.933 4.243C7.571 11.368 9.25 12 11 12Z"
    />
  </Svg>
);

export default EyeOpen;

* 여기서 주의할 점은 <svg><path>이렇게 태그의 첫 글자를 소문자로 시작하면 아래와 같은 에러가 뜨니 필히.... 대문자로 시작하세요...

 

 

참고사이트

https://stackoverflow.com/questions/58603201/jest-cannot-load-svg-file

Jest cannot load svg file

 

https://velog.io/@rhfovk/React-Native%EC%97%90%EC%84%9C-svg-import-%EB%AA%BB%ED%95%98%EB%8A%94-%EB%AC%B8%EC%A0%9C

testing-library에서 svg 인식 못하는 문제