[React] 'Component' cannot be used as a JSX component 에러 해결

 

 

 

프로젝트 빌드 과정 중에 에러가 또 발견됐다.

 

<Component {...pageProps} />

 

 

위 코드에서 'Component' cannot be used as a JSX component 에러가 잡히며 빌드가 되지 않았다.

 

원인을 찾아보니 react 버전이 18로 업데이트되면서 @type/react도 18로 업데이트 됐을 텐데,

 

해당 버전에 발생할 수 있다며 17 버전으로 변경해줘야 한다고 하여 바꿨지만

 

해결되지 않았다. 씁...!

 

 

---

 

 

 

 

초기에 nextjs 앱 생성을 create-next-app  로 해줬는데,

 

package.json에 dependencies안에

 

"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.18"

 

 

위 항목들이 포함되어 있었다. 혹시 해당 타입 라이브러리들이 devDependencies 안에 들어가야 해서 속는 마음으로 해봤는데,

 

 

 

"devDependencies": {
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18"
 }

 

 

 

위처럼 적용하고 했더니, 에러가 해결되었다. 띠용...

 

생각해보면 위 타입 라이브러리들은 devDependencies에 종속되는 것이 맞을 것 같기도 하다.

(앱에 직접 영향을 주지 않으니까..?)

 

 

 

 

여튼 문제 해결!