[에러] 1) component cannot be used as a jsx component in nextjs , 2) NextRouter was not mounted. 3) Warning: Function components can not be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

에러 1 : component cannot be used as a jsx component nextjs

 

 

해결방법먼저 

/* @ts-expect-error Server Component */

 

에러난 곳에 이걸 넣어주면 해결된다. 

 

에러상황 

 

 

Button 공통 컴포넌트를 작성하는 도중, 

tagName을 동적으로 useButtonProps 훅을 활용해서 

Component라는 변수에 넣어주는 방법을 사용하는 도중 발생한 에러다.

(polymorphic component)

 

 

return (
    <>
      {
        <Component
          className={`button ${getClassName(variant)}`}
          {...buttonProps}
          {...props}>
          {href ? <Link href={href}>{children}</Link> : children}
        </Component>
      }
    </>
  );

 

 

 

에러의 원인 

 

똑같은 로직을 이전 프로젝트에서 사용할 때는 발생하지 않았는데 

이유는 Next js를 사용하고 있었기 때문.

 

프로미스 엘리먼트를 사용할 때 나는 타입에러다.

 

Async Server Component TypeScript Error
To use an async Server Component with TypeScript, ensure you are using TypeScript 5.1.3 or higher and @types/react 18.2.8 or higher.
If you are using an older version of TypeScript, you may see a 'Promise<Element>' is not a valid JSX element type error. Updating to the latest version of TypeScript and @types/react should resolve this issue.

 

Configuring: TypeScript | Next.js

 

 

 

@types/react를 최신버전 18.2.8버전 혹은 그 이상을 다운받으면 된다고 해서

업그레이드 하려고 했으나 yarn에서 오류 

그런데 아래는 --latest로 변경했어야 했다 잘못 씀

 

 

 

 

일단 그래서 이유를 몰라서 yarn을 업데이트 해주고 

 

 

 

 

그다음엔 그냥 @types/react로 최신버전 자동으로 설치하게 해줌 

 

 

 

 

그러나 에러는 해결되지 않아서

 

 

'SomeComponent' cannot be used as a JSX component. · Issue #42292 · vercel/next.js

/* @ts-expect-error Server Component */

 

이걸 문제가 된 줄 위에 넣어주었더니 에러가 해결되었다. 

 

 

 

에러 2 : NextRouter was not mounted.

 

 

에러상황 : 

 

useRouter를 사용하려고 아래와 같이 작성하였으나 에러 발생.

 

 

 

 

import { useRouter } from 'next/router';

//생략
  const router = useRouter();
  console.log(router.pathname);

 

 

 

에러원인: 

 

usePathname을 사용해야 하는데 잘못 사용했었음

 

 

import { usePathname } from 'next/navigation';

//생략
  const pathname = usePathname();

 

 

 

useRouter의 올바른 사용예시 

 

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

 

 

 

에러 3:  Warning: Function components can not be given refs.  Attempts to access  this ref will fail. Did you mean to use  React.forwardRef()

 

 

 

 

에러의 원인 : 

react-hook-form이 자식 컴포넌트에 ref를 전달해주고 있어서 생긴 일. 

 

 

 

해결 :  

해결은 간단하다 input 컴포넌트를 forwardRef로 감싸주는것.