패키지 업데이트하며 발생한 에러 정리

 

# 패키지 업데이트 (yarn.lock만 변경됨)
$yarn upgrade

# yarn.lock에서 설치된 버전으로 package.json을 업데이트
$yarn global add syncyarnlock
$syncyarnlock -s -k

# package.json의 현재 버전 제약 조건으로 yarn.lock을 업데이트
$yarn

react-typescript 프로젝트를 패키지 업데이트 이후

여러가지 에러들이 발생하였는데, 해결한 내용들을 정리하였다.

 

 

🚫 node_modules/@types/babel__traverse/index.d.ts: ']' expected.

    66 | }
    67 | 
  > 68 | export type ArrayKeys<T> = keyof { [P in keyof T as T[P] extends any[] ? P : never]: P };

 

에러시 버전

"typescript": "^3.9.10"

 

✅ 타입스크립트 버전 업데이트해서 해결

"typescript": "4.5.5"

 

https://stackoverflow.com/questions/63903376/angular-node-modules-types-babel-traverse-index-d-ts1137-43-error-ts1109

 

---

🚫 Line 0:  Parsing error: Cannot read property 'map' of undefined

로직 작업을 하다가 조건부 렌더링을 하지 못해 발생한

TypeError:Cannot read property 'map' of undefined 과 아예 다른 에러이다.

 

나는 Parsing error!!

 

react-script의 버전이 낮아 발생한 문제였다.

 

에러시 버전

"react-scripts": "^3.4.4"
"@typescript-eslint/parser@^2.10.0"
"@typescript-eslint/eslint-plugin@^2.10.0"

 

✅ react-script를 4버전으로 업데이트하여 해결

"react-scripts": "^4.0.3"
"@typescript-eslint/parser@^5.45.0"
"@typescript-eslint/eslint-plugin@^5.45.0"

 

https://stackoverflow.com/questions/62079477/line-0-parsing-error-cannot-read-property-map-of-undefined

 

---

🚫 Uncaught ReferenceError: process is not defined

✅ 첫 번째 해결방법

update react-scripts v5

하지만 react-script 버전을 올리는 것이 항상 좋은 방법은 아니다.

webpack 버전 5이상은 폴리필을 수동으로 구성해야하기 때문에, 추가적인 에러들이 발생할 수 있다.

 

✅ 두 번째 해결방법

install react-error-overlay@6.0.9

# 설치 후 package.json에도 직접 추가

"resolutions": {
  "react-error-overlay": "6.0.9"
},

 

https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined

https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869

https://doqtqu.tistory.com/341#toc-%ED%95%B4%EA%B2%B0%20%EB%B0%A9%EB%B2%95

 

---

🚫 'TableHeader' cannot be used as a JSX component. 

> 발생 원인

React App에 리액트 d.ts 파일은 버전에 맞는 d.ts 파일 하나여야 하는데

다른 버전의 리액트 type declaration 파일 두개가 충돌해서 나는 문제였다.

 

현재 리액트 16버전을 사용중인데

패키지 업그레이드 하면서 업그레이드 된 라이브러리들이 가리키는 리액트는 18버전이 되어

기존 리액트와 충돌이 나서 발생한 오류인것으로 추정된다.

 

아래 사진을 보면

node_modules/@types/react/index.d.ts에는 React 16.14버전이지만,

node_modules/@types/styled-components/node_modules/@types/react/index.d.ts 경로에는

React 18.0 d.ts파일이 존재한다.

 

✅ 첫 번째 해결방법

현재 버전에 맞지 않은 d.ts 파일들을 삭제하는 것이다.

스타일 컴포넌트 폴더 하위에 잘못 설치된 @types/react 패키지의 node_modules 폴더를 지웠다.

 

컴파일 에러 나는 라이브러리들의 node_modules를 싹 지워서 실제 해결된 것을 확인하였다!!

 

before

node_modules/@types/styled-components/node_modules/@types/react/index

node_modules/@types/styled-jsx/node_modules/@types/react/index

node_modules/@types/react-router/node_modules/@types/react/index

node_modules/@types/react-router-dom/node_modules/@types/react/index

node_modules/@types/react-date-range/node_modules/@types/react/index

node_modules/@types/react-transition-group/node_modules/@types/react/index

 

after

node_modules/@types/styled-components/

node_modules/@types/styled-jsx/

node_modules/@types/react-router/

node_modules/@types/react-router-dom/

node_modules/@types/react-date-range/

node_modules/@types/react-transition-group/

 

https://velog.io/@sweetpumpkin/ThemeProvider-cannot-be-JSX-element-%EC%97%90%EB%9F%AC

 

✅ 두 번째 해결방법

내가 에러난 부분은 TableHeader을 선언한 withStyles 이므로

withStyles를 makeStyles로 변경해주어 에러를 해결하였다.

 

Found a solution: Ditch withStyles and use makeStyles instead.

const TableHeader = withStyles(() => ({
  root: { backgroundColor: "#E7E6E6" },
}))(TableHead);

const useStyles = makeStyles(() => ({
  root: { backgroundColor: "#E7E6E6" },
}));

function componentName() {
  const classes = useStyles();
  return (
    <>
      <TableHead className={classes.root}>
        {/* more code */}
      </TableHead>
    </>
   );
 }

 

https://stackoverflow.com/questions/71851374/typescript-error-component-with-mui-style-cannot-be-used-as-a-jsx-element