[TypeScript] 프로젝트에서 컴포넌트를 import하는데 '~은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise<Element>'은(는) 유효한 JSX 요소가 아닙니다.' 에러가 뜬다
0
TypeScript
목록 보기
5/5
🧨 문제
nextJS프로젝트에서 컴포넌트를 import해서 사용하는데 아래와 같은 오류메시지가 떴다. 해당 메시지는 타입스크립트 라우터에서 발생한다고 한다.
🤔 원인
소스코드는 아래와 같은데, 비동기 async/await를 쓰고 싶어서 async키워드를 써주게 되면, route함수의 element속성에는 JSX형식이 와야하는데 async로 선언하는 바람에 Promise객체가 반환되므로 형식이 안맞아서 나는 오류 같다.
// app/layout.tsx
import Menu from '../components/menu'
export default async function Example({children}) {
const data = await blabla()
return (
<html lang="en">
<body>
<Menu data={data}></Menu>
</body>
</html>
)
}
// components/menu.tsx
export default function async Menu({data}: {data: MenuProp[]}) {
return (
<ul>
<li>
{data.map((item) => {
return GnbMenu(item)
})}
</li>
</ul>
)
}🙌 해결
Menu컴포넌트에서 async키워드를 빼주니 해당 에러가 사라졌다.
// components/menu.tsx
export default function Menu({data}: {data: MenuProp[]}) {
return (
<ul>
<li>
{data.map((item) => {
return GnbMenu(item)
})}
</li>
</ul>
)
}✚
'<' 연산자는 'boolean' 및 'RegExp' 유형에 적용할 수 없습니다. 의 에러도 JSX형식을 지원하는 타입스크립트에서 .tsx확장자로 파일이름을 지정하거나, tsconfig파일에서 jsx옵션을 활성화 해야한다는 부분에서 비슷한 사례라 생각이 든다.
☑️ 참고
Superduper-India