참고
https://kimdohyeon.tistory.com/54
https://velog.io/@loakick/Github-Action-AWS-S3%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
main.yml 작성하고 workflow를 확인해보니 다음과 같은 오류가 떴다.
code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-naver-maps@0.0.13
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/react@11.10.0
npm ERR! node_modules/@emotion/react
npm ERR! @emotion/react@"^11.8.1" from react-select@5.4.0
npm ERR! node_modules/react-select
npm ERR! react-select@"^5.4.0" from the root project
npm ERR! 18 more (@react-aria/ssr, @restart/hooks, @restart/ui, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0-0" from react-naver-maps@0.0.13
npm ERR! node_modules/react-naver-maps
npm ERR! react-naver-maps@"^0.0.13" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0-0" from react-naver-maps@0.0.13
npm ERR! node_modules/react-naver-maps
npm ERR! react-naver-maps@"^0.0.13" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/runner/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2022-10-26T09_04_27_795Z-debug-0.log
Error: Process completed with exit code 1.여러 블로그들을 둘러본 결과, 1 리액트 버전 다운그레이드 2 --legacy-peer-deps 를 추천했다.
일단 첫 번째 방법을 채택해 리액트 다운 그레이드를 진행했고 다음과 같은 오류가 떴다.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react@13.3.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/react@11.10.0
npm ERR! node_modules/@emotion/react
npm ERR! @emotion/react@"^11.8.1" from react-select@5.4.0
npm ERR! node_modules/react-select
npm ERR! react-select@"^5.4.0" from the root project
npm ERR! 17 more (@react-aria/ssr, @restart/hooks, @restart/ui, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.3.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/runner/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2022-10-26T09_48_45_092Z-debug-0.log
Error: Process completed with exit code 1.
크게 바뀐 게 없어 보이지만 react-naver-map에서 testing-library가 문제가 바뀌었다.
npm install react@^17.0.2 react-dom@17.0.2을 통해 리액트와 리액트 돔은 다운그레이드가 되었지만
package.json에서 얘네들은 변경이 안 되었다.
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",버전을 12.0.0으로 바꿔주고 index.js에서도
//import ReactDOM from "react-dom/client";
//const root = ReactDOM.createRoot(document.getElementById("root"));
//root.render();
ReactDOM.render(
...
,document...)로 변경을 해주었다.
그러나 리액트 18과 같은 에러가 또 나타났다.
그래서 두 번째 방법을 시도해보았다.
main.yml에서 Install Dependencies의 install run에 --legacy-peer-deps를 추가해주니 아주 잘 되었다.
일단 코드를 적용해보기 보다는 생각을 더 하고 움직어야겠다는 교훈을 얻었다.
