[React] 리액트 빌드 후 빈 화면

[React] 리액트 빌드 후 빈 화면

 책에 나온 todo 리스트 프로젝트를 진행하던 도중 material ui를 사용하는 부분에서부터 react가 빌드 후 빈 화면을 가져왔다. 그래서 검색을 하고 그 해결을 위한 과정을 기록하려한다.

 

React.js, 스프링 부트, AWS로 배우는 웹 개발 101(웹 프로페셔널) | 김다정 | 에이콘출판 - 교보문고 (kyobobook.co.kr)

React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 교보문고

콘솔 - 오류코드

-접은 글-

2bundle.js:94465 
        
       Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (bundle.js:94465:17)
    at Object.useContext (bundle.js:94473:24)
    at useTheme (bundle.js:59989:50)
    at useStyles (bundle.js:59817:70)
    at WithStyles (bundle.js:60078:21)
    at renderWithHooks (bundle.js:24002:22)
    at updateForwardRef (bundle.js:26860:24)
    at beginWork (bundle.js:29184:20)
    at HTMLUnknownElement.callCallback (bundle.js:11798:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11847:20)
bundle.js:26341 
        
       The above error occurred in the <WithStyles(ForwardRef(Container))> component:

    at WithStyles (http://localhost:3000/static/js/bundle.js:60071:31)
    at div
    at App (http://localhost:3000/static/js/bundle.js:198:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ bundle.js:26341
bundle.js:34404 
        
       Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (bundle.js:94465:17)
    at Object.useContext (bundle.js:94473:24)
    at useTheme (bundle.js:59989:50)
    at useStyles (bundle.js:59817:70)
    at WithStyles (bundle.js:60078:21)
    at renderWithHooks (bundle.js:24002:22)
    at updateForwardRef (bundle.js:26860:24)
    at beginWork (bundle.js:29184:20)
    at beginWork$1 (bundle.js:34897:18)
    at performUnitOfWork (bundle.js:34055:16)
bundle.js:42784 
        
       WebSocket connection to 'ws://localhost:3000/ws' failed: 

해당 오류코드가 나오면서 실습을 진행하던 localhost:3000은 빈 화면을 가져왔다.

 

과정

https://github.com/fsoftwareengineer/todo-application/discussions

GitHub - fsoftwareengineer/todo-application

작가님의 책 질문을 위한 깃의 discussions에서 나와 같은 질문을 한 사람을 발견하였다. 코딩 및 프로그래밍을 배우다보면 이 분야는 한자리에 머물러 있는것이 아닌 꾸준하게 발전을 하고 움직이는 분야라고 생각을 한다. 작가님이 해당 코드를 작성하실 때와 지금 내가 사용하는 리액트의 버전이 틀려서 발생한 문제였다. 기술이 발전을 하면서 변화가 일어나는 부분이 이러한 빈화면을 빌드하게 한 것이었다. 그래서 react의 버전을 다운그레이드 하며 문제를 해결할 수 있었다.

// react의 버전을 수정하는 코드
npm install --save react@^[버전 정보] react-dom@[버전 정보]

 또한 질문 중에 리액트 라우터 돔을 확인하는 것도 있기에 리액트 라우터 돔의 버전도 다운그레이드 했다.

// Router dom 설치를 희망하는 React 프로젝트의 디렉토리로 이동

// 현재 최근 버전은 ver 6이다. 다만 저자님이 사용하신 ver는 ver 5이다.
npm install react-router-dom --save

// 다운그레이드 방법
npm i react-router-dom@5.2.0

-해결-