react : import ~ from @material-ui/core error

React.js, 스프링부트, AWS로 배우는 웹개발 101 책을 따라하는데,

@material-ui/core 을 import 하고 사용하는데 흰 화면만 뜨고, 콘솔창에 엄청난 에러들이 등장했다.. 아래와같이...

---------------------------------------------------------------------------------------------------

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.

---------------------------------------------------------------------------------------------------

react-dom.development.js:18572 The above error occurred in the <WithStyles(ForwardRef(ListItem))> component:

    at WithStyles (http://localhost:3000/static/js/bundle.js:51506:31)
    at Todo (http://localhost:3000/static/js/bundle.js:138:5)
    at div
    at App (http://localhost:3000/static/js/bundle.js:32: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.

---------------------------------------------------------------------------------------------------

 

위 내용에서 따라가보니까 생성자 constructor 설정한 부분이 잘못됐다고 뜨는데.. 

 

그러면서 Invalid hook call 이니깐 1. 업데이트 해봐라(버전 낮으면), 2. 규칙을 어겼다. 3. 중복된 파일인거 같다

아래 홈페이지에 들어가서 확인해봐라 해서 들어가 봤더니 

버전확인하는 방법, 업데이트 하는 방법, 후크 규칙 올바른 예시 등등.. 다 나랑 맞는 에러는 아니다.

아 너무 답답한데 @material-ui/core를 사용하면 생성자에서 오류나는게 아니라 무조건 에러가 나는거같아서 열심히 뒤져봤다.

 

stackoverflow에서 힌트를 얻었다...(마지막에 출처 첨부)

 

node_modules 폴더를 가보니깐 @material-ui 폴더 자체가 아에 없다. 헐(아니 그럼 에러를 @material-ui를 못찾겠다고 보여주던가)

저 파일 찾아서 위와 같이 폴더에 넣어줬더니 정상 작동...

 

콘솔에서 알려준 에러가 날 낚았다.. 

저 폴더를 다시 지워봤다. 원래 나왔던 에러를 복사해서 기록하려고 했는데, 문제의 저 폴더를 지우니 다른 에러가 뜬다.

---------------------------------------------------------------------------------------------------

Uncaught Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/-----/JavaWork/workspace/-----/----/------/node_modules/@material-ui/core/esm/index.js'
    at Object../node_modules/@material-ui/core/esm/index.js (reportWebVitals.js:13:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/Todo.js (App.js:36:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/App.js (bundle.js:18:63)
    at Module.options.factory (react refresh:6:1)

---------------------------------------------------------------------------------------------------

아니 이번에는 @material-ui/core이라는 파일이 없다고 친절하게 알려주네?

처음부터 이렇게 알려줬으면 얼마나 좋았을까..

 

근데 서버를 껏다가 키면 또 처음과 같이 훅이 잘못된거같다 버전확인해라 이런 에러 뜬다.

저번에도 파일 없어서 문제 생겼었는데 문제생기면 파일 있는지부터 찾아봐야겠다.

 

 

출처 :

https://stackoverflow.com/questions/71100860/error-when-compiling-ts-library-with-material-ui-component

Error when compiling ts library with material-ui component