Next.js 오류 일기 TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function at eval (webpack-internal:

 

Next.js TypeError 0 createContext is not a function 오류 해결기(썰렁)

 

결과부터 말하자면,

"use client" !!!!!

 

문제가 생겼던 시점

 

프로젝트 초반이라 만든 것도 별로 없는 상태에서 framer motion을 깐 뒤 motion.div로 기존 태그를 바꾸고 미리보기를 본 순간에 다음과 같은 type error가 떴다. 

 

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function    at eval (webpack-internal: (...줄임)

 

...?

근데 오류가 왠지 낯이 익었던걸 그땐 자신도 모르게 애써 무시했던걸까...(먼산)지금 생각해보면 넥제 맨 처음 할때도 겪었던 문제였다

 

해결을 위한 삽질

 

오류의 해결 방법을 찾기 위해 평소 습관으로 chatgpt를 찾았었고, 

정석과 같이 느껴지는? 다음과 같은 사항들을 점검하라는 제안을 받을 수 있었지만 해결되지 않았다.

1.어느 부분에서부터 오류가 나는지 코드를 체크하라,

2.콘솔창에서 오류에 대한 정보를 더 좀 긁어봐라,

3.업데이트는 했는가 자네,

4.try catch로 디버깅을 해보시게

 

이걸 잔소리로 들으면 안되는데 자꾸 그렇게 들릴라고 하...

 

여기에서 한번 더 이번엔 구글에 검색 후 ,

stackoverflow에서의 어떤 분의 다음과 같은 답변에 따라 해결될 수 있었다

 

참고

https://stackoverflow.com/questions/54302725/react-createcontext-is-not-a-function-but-i-am-not-using-it/74699940#74699940

"React.createContext is not a function" - but I am not using it

 

답변을 요약하자면 쌩기초중의 기초, next.js에서는 "use client" directive를 최상위에 명시할 것. 명시하지 않은 컴포넌트는 서버의 컴포넌트로 인식하는 next.js의 스마트함 덕분이다.

 

잊을거나 잊어야 되는데 바보같다.

부끄럽게도 이런 실수를ㅠ... 변명을 하자면,쌩 리액트로 뭔가를 만들어보다가 갑자기 넥제로 다시 돌아와서 만들다 보니...게다가 평소에 구글링에 실망한 적이 잦았던 경험에 무심코 chatgpt와 큰 차이가 없을 거라고 (말도 안되게) 여겼었어서 한 행동에 이런 일이 있었다.

 

그치만 역시 내겐 구관이 명관(?)이었던것 같다. 구글링도,그걸 잘 다루는 만큼 보다 정확한 결과를 얻을 수 있는 것이다.

향후 계획

 

이번엔 너무 허무해서 계획이랄것도 없다. 정신 차려야지. 향후 문제를 발견했을 때는 (당연히) 우선 구글링을 하되, 검색어 공부를 병행 후 더 세밀한 검색을, 우선순위 사이트 위주로 정밀 검색을 노려보는 것도 좋겠다는 생각이 들었다.

기초와 또 기초를 소중히 여기는 마음을 잊지 말자.