Typescript React 리턴 타입 오버라이딩

작성일	수정일	tags
2024-03-06 15:33	2024-03-06 15:33

오류

'Button' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element Type 'undefined' is not assignable to type 'Element | null'

상황

import { Button, Badge } from "flowbite-react";

flowbite-react 라이브러리에서 제공하는 Badge 컴포넌트의 Bug가 있어서

npm update flowbite-react^0.7.3

v0.7.2 -> v0.7.3 업데이트후 Button 컴포넌트가 리턴 타입에 에러가 발생

경과

원인

라이브러리 버그

조치

index.d.ts 파일에서 Button 컴포넌트 반환 타입 오버라이딩 처리

// typings/index.d.ts
declare module "flowbite-react" {

  export interface ButtonProps {

	}

  

  // Button 컴포넌트의 타입을 JSX.Element로 수정합니다.

  export const Button: JSX.Element;

}

// ./tsconfig.json
{
  "compilerOptions": {
	...
    "typeRoots": ["./typings"]
  },
  "include": [
    ...
    "typepings/index.d.ts"  
  ]
}

결론

Typescript React 리턴 타입 오버라이딩

작성일	수정일	tags
2024-03-06 15:33	2024-03-06 15:33

오류

'Button' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element Type 'undefined' is not assignable to type 'Element | null'

상황

import { Button, Badge } from "flowbite-react";

flowbite-react 라이브러리에서 제공하는 Badge 컴포넌트의 Bug가 있어서

npm update flowbite-react^0.7.3

v0.7.2 -> v0.7.3 업데이트후 Button 컴포넌트가 리턴 타입에 에러가 발생

경과

원인

라이브러리 버그

조치

index.d.ts 파일에서 Button 컴포넌트 반환 타입 오버라이딩 처리

// typings/index.d.ts
declare module "flowbite-react" {

  export interface ButtonProps {

	}

  

  // Button 컴포넌트의 타입을 JSX.Element로 수정합니다.

  export const Button: JSX.Element;

}

// ./tsconfig.json
{
  "compilerOptions": {
	...
    "typeRoots": ["./typings"]
  },
  "include": [
    ...
    "typepings/index.d.ts"  
  ]
}