CRA를 통해 리액트 프로젝트를 생성했었다.
버전 업그레이드를 하고 싶은데 어떻게 해야하나 하고 리액트 공식 홈에 들어갔더니
yarn upgrade react-scripts@latest
라고만 나와있네 ^_^;;;
이거말고도 다른게 있을것 같은데...
npx create-react-app info
로 CRA 버전 정보를 확인해보자.
여기서보면 react, react-dom, react-scripts 를 버전업그레이드해주면된다!
CRA는 react를 좀더 사용하기 쉽게 만들어주는 슈퍼셋 같은 느낌인데,
관련된 라이브러리들도 자동으로 버전관리를 해준다.
그래서 eject 하지 않는 이상 따로 버전관리를 할 필요가 없다.
이 기능을 해주는게 react-scripts
이다.
그래서 업그레이드된 CRA버전을 사용하고자 하면 react-scripts를 업그레이드해주어야한다!
하지만 자동으로 버전관리를 해준다는건, 그 전에 사용하던 버전 변경사항이 생기면 대응해줘야한다는 이야기.
그래도 이게 버전 안맞아서 나는 에러로 어떤게 버전안맞는지 찾는것보다 낫다.
webpack 버전도 자동으로 관리해줘서 너무 편하지만,
webpack 업그레이드되면서 생겨나는 에러들이 있었다.
기존에 제공하던 Node.js 자동 polyfill을 5버전에서는 제공안한다.
번들사이즈를 줄이기위한 노력으로 보여짐.
webpack 버전 5 관련하여 참고 글은 이 링크를 참조하시길
https://so-so.dev/tool/webpack/whats-different-in-webpack5/
어쨌든 그래서 그 전에 제공하던 폴리필이 사라져서 생기는 문제들.
Module not found: Error: Can't resolve 'crypto' in '/Users/.../node_modules/crypto
Module not found: Error: Can't resolve 'stream' in '/Users/.../node_modules/cipher-base
Module not found: Error: Can't resolve 'buffer' in '/Users/.../node_modules/safe-buffer
일단 buffer
같은 경우는 install 했더니 문제가 사라졌다.
crypto
는 사용하고 있는거라 crypto-browserify
를 install하고, pacakage.json에 다음 설정을 추가했다.
stream
도 stream-browserify
를 install하고, 설정추가.
// packages.json
{
...
"browser": {
"crypto": "crypto-browserify",
"stream": "stream-browserify"
}
}
여러가지 문구로 문제가 발생할 수 있는데,
Failed to load parser 'babel-eslint' declared in '.eslintrc:...'
Failed to load 'airbnb' declared in '.eslintrc: ...'
이렇게 eslintrc 파일에서 문제가 있다고 하는 경우,
eslint parser 문제이다.
(왜냐면 그 전에는 프로젝트에서 잘 작동되었기 때문에.
만약 설치가 안된거라면 파일을 못찾는다고 에러메시지가 나온다.)
이건 eslintrc파일에서 babel-eslint
대신에
@babel-eslint/parser
나 @typescript-eslint/parser
를 사용하면 된다.
// .eslintrc
{
...
"parser": "@typescript-eslint/parser"
}
이렇게 추가한 후에도 안될 수 있는데,
그럴 땐 `rm -rf yarn.lock` 을 해서 yarn.lock 파일을 지운 후 새로 패키지들을 설치해주자. ^^
그럼 해결된다. 왜그런지는 모르겠으나 eslint parser 설정에서 패키지들이 꼬인 모양이다.
프로젝트 두개를 다 버전 업그레이드를 진행했었는데,
하나는 잘 해결됐었는데, 다른하나는 eslint에 jest 설정 있는거 말고는 잘진행된 프로젝트랑 다른게 하나도 없는데 이상하게 안됐다.
그걸로 거의 하루를 왜 안되지...하면서 찾아보고 했었는데
yarn.lock 파일 문제였다 ^^^^^^ 이런게 제일 화남...
패키지 꼬인거같으면 습관적으로 node_modules 삭제하곤하는데 이제 yarn.lock도 같이 삭제해야지.
Android Emulator:: INSTALL_FAILED_INSUFFICIENT_STORAGE (0) | 2022.06.18 |
---|---|
Watchman:: Operation not permitted (0) | 2022.06.18 |
Git SSH_ Permission denied (publickey) (0) | 2021.05.12 |
PM2 Error: PM2 log: Script /home/ubuntu/NodeBird/back/app.js had too many unstable restarts (16). Stopped. "errored" (0) | 2021.01.28 |
Error: Failed to serialize user into session (0) | 2021.01.22 |
댓글 영역