강좌 보면서 개인프로젝트에 적용중입니다. build시 "Arrow" cannot be used as a JSX component 에러가 납니다.

./src/_components/Carousel.tsx
110:6  Warning: React Hook useEffect has a missing dependency: 'nextFn'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

(....lint warning문구 생략)

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

   Linting and checking validity of types  .Failed to compile.


./src/_components/Carousel.tsx:137:12

Type error: 'Arrow' cannot be used as a JSX component.

  Its type 'FC<PropsWithChildren<ArrowProps>>' is not a valid JSX element type.

    Type 'FunctionComponent<PropsWithChildren<ArrowProps>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.

      Type 'ReactElement<any, any> | null' is not assignable to type 'ReactNode'.

        Type 'ReactElement<any, any>' is not assignable to type 'ReactNode'.

          Property 'children' is missing in type 'ReactElement<any, any>' but required in type 'ReactPortal'.

  135 |         className={`h-full w-full ${inArrow ? 'absolute' : ''} max-w-full`}>

  136 |         {!!showNavButton && (

> 137 |           <Arrow

      |            ^

  138 |             direction="left"

  139 |             executeFn={prevFn}

  140 |             inArrow={inArrow}

error Command failed with exit code 1.

'use client';
import { FC, PropsWithChildren, useEffect, useState } from 'react';

interface ArrowProps {
  direction: 'left' | 'right';
  executeFn: () => void;
  inArrow?: boolean;
  hoverStyle?: string;
}

const Arrow: FC<PropsWithChildren<ArrowProps>> = ({
  direction,
  executeFn,
  inArrow,
  hoverStyle,
  children,
  ...props
}) => {
  const [hoverColor, setHoverColor] = useState(hoverStyle || undefined);

  useEffect(() => {
    hoverStyle && setHoverColor(`hover:${hoverStyle}`);
  }, [hoverStyle]);

  const returnString = direction === 'left' ? '<' : '>';

  return (
    <div
      onClick={executeFn}
      className={`${inArrow ? 'absolute z-50' : ''} ${direction === 'left' ? 'left-0 top-0 rounded-l-lg' : 'right-0 top-0 rounded-r-lg'}  center-vertical flex h-full w-[30px] cursor-pointer text-[30px] ${hoverColor && hoverColor}`}
      {...props}>
      {returnString}
      {children}
    </div>
  );
};

export default Arrow;

next build를 했을때 해당 에러가 Arrow컴포넌트에서 발생하였습니다.

Arrow컴포넌트에서 제가 정의한 FC<PropsWithChildren<ArrowProps>>타입이 유효한 JSX element type이 아니라는 메시지 인거 같습니다.

이 에러가 나는 이유가

유효한 JSX엘리먼트가 아니어서 일것같아서

return 하는 jsx문법에 오류가 있는지 확인하려

div 겉에도 fragment로 감싼다거나

returnString을 해주는 중괄호 부분도 fragment로 감싸거나

children도 감싸보았습니다.

그러나 똑같은 에러가 발생하고 있는 상황입니다.

  const returnString = direction === 'left' ? '<' : '>';

혹시 위의 코드가 문제가 발생할까 싶어서 SVG파일을 만들어

조건에따라 왼쪽 오른쪽 SVG 파일 컴포넌트를 return 문 안에서 렌더링 해주었는데

여기서도 동일한 에러가 발생하였습니다.

Type error: 'LeftSvg' cannot be used as a JSX component.
  Its type '({ className, width, height, onClick, cyAttribute, }: { className?: string | undefined; width?: number | undefined; height?: number | undefined; onClick?: (() => void) | undefined; cyAttribute?: string | undefined; }) => JSX.Element' is not a valid JSX element type.
    Type '({ className, width, height, onClick, cyAttribute, }: { className?: string | undefined; width?: number | undefined; height?: number | undefined; onClick?: (() => void) | undefined; cyAttribute?: string | undefined; }) => JSX.Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Element' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

  24 |   }, [hoverStyle]);
  25 |
> 26 |   const returnString = direction === 'left' ? <LeftSvg /> : <RightSvg />;
     |                                                ^
  27 |
  28 |   return (
  29 |     <div
error Command failed with exit code 1.

참고로

'DatePicker' cannot be used as a JSX component. Its instance type 'ReactDatePicker<undefined, undefined>' is not a valid JSX element.

이런 에러가 타입에러 발견 된 적이 있어서

package.json파일에

 "resolutions": {
    "@types/react": "^18.0.0"
  },

resolutions로 버전을 위와 같이 맞춰주어서

해결한 적이 있습니다.