빌드시 React TypeError: Object(...) is not a function 오류 (부제:임포트를 잘하자)

그 동안 만들었던 YourTube를 어제 배포하면서 있었던 오류를 해결하며 저와 같은 실수를 하는 사람에게 도움이 되었으면 하는 바람으로 글을 쓰게 되었습니다.

우선 yarn start로 로컬에서 개발하며 테스트 했을 때는 전혀 문제가 없다가, netlify 로 배포하니 오류도 없고, 잘 빌드되었다고 나왔는데 접속해보면 빈 화면이 나왔다.

분명 내가 테스트 했을 때는 잘 실행이되니 netlify 문제라 생각하고 netlify 커뮤니티에서 When deploying my app only get a blank page(https://answers.netlify.com/t/when-deploying-my-app-only-get-a-blank-page/30262)이 글과 같이 빈화면이 나오고 있는 문제에 대한 글을 많이 찾아 보았다.

그리고 콘솔창에 있던 React TypeError: Object(...) is not a function 에러문구에 대해서 구글링 해보았지만, 빌드단계에서 버전문제라던지, 다 나에게는 해당 되지 않았다.

그리고 콘솔에서 에러가 발생한 위치 home.jsx 12번째줄을 보니 useState()를 선언한 부분이었다. 그래서 null체크가 잘못되었나? 했지만 이리저리 수정해도 해결되지않았고, 갑자기 import에서의 문제가 눈에 띄었다. 이때 보지못했다면 아직도 배포 못했을 듯..😭

//변경전
import React, { useEffect, memo } from 'react';
import { useDrop } from 'react-dnd';
import { useState } from 'react/cjs/react.development';
...
//변경후
import React, { useState,useEffect, memo } from 'react';
import { useDrop } from 'react-dnd';
...

useState가 vscode에서 자동 완성해주는 import 를 믿고 작업하다보니 useState가 react로부터가 아니라 'react/cjs/react.development'에서 임포트 되어있었다.
이후 모든 파일에서 react 관련 import경로를 'react'로 바꿔주고 다시 배포하니 성공!
저와 같은 경우를 겪으시는 분에게 도움이 되길 바라며 글 마치겠습니다.

오늘의 교훈

• 로컬에서 잘 동작한다고 문제가 없는 것이 아니다.
• 에러가 발생한 시점을 잘 관찰하자!
• 자동완성을 100% 믿지말자.

그리고 힘들게 배포한 YourTube 한번씩 이용해주세요 🤞🏻
https://yourtube-app.netlify.app/