[Jenkins] 리액트 경고를 빌드 오류로 인식하는 설정

이명범·2023년 3월 13일
0

트러블슈팅

목록 보기
6/8
post-thumbnail

문제

Jenkins로 리액트 프로젝트를 빌드할 때 발생한 문제이다. 에러 로그는 다음과 같다.

Error Log

Started by user이명범
Running as SYSTEM
Building in workspace /var/jenkins_home/workspace/cloudfront-deploy-project
The recommended git tool is: NONE
using credential this
 > git rev-parse --resolve-git-dir /var/jenkins_home/workspace/cloudfront-deploy-project/.git # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.urlhttps://lab.ssafy.com/mungmnb777/aws-cicd-test-repo.git # timeout=10
Fetching upstream changes fromhttps://lab.ssafy.com/mungmnb777/aws-cicd-test-repo.git
 > git --version # timeout=10
 > git --version # 'git version 2.30.2'
using GIT_ASKPASS to set credentials final-project-credentials-by-username
 > git fetch --tags --force --progress --https://lab.ssafy.com/mungmnb777/aws-cicd-test-repo.git +refs/heads/*:refs/remotes/origin/* # timeout=10
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
Checking out Revision 378148c31f8d8cde37704d69b8bb220e20c638d8 (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 378148c31f8d8cde37704d69b8bb220e20c638d8 # timeout=10
Commit message: "zz"
 > git rev-list --no-walk 378148c31f8d8cde37704d69b8bb220e20c638d8 # timeout=10
[cloudfront-deploy-project] $ /bin/sh -xe /tmp/jenkins15902922808150805276.sh
+ cd FE/shall-we-meet-then
+ npm install

up to date, audited 1514 packages in 13s

216 packages are looking for funding
  run `npm fund` for details

25 vulnerabilities (24 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
+ npm run build

> shall-we-meet-then@0.1.0 build
> react-scripts build

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint]
src/App.js
  Line 5:10:  'useEffect' is defined but never used  no-unused-vars

src/Components/Group/ShiningClock.js
  Line 17:11:  'play' is assigned a value but never used       no-unused-vars
  Line 18:11:  'pause' is assigned a value but never used      no-unused-vars
  Line 19:11:  'playBtn' is assigned a value but never used    no-unused-vars
  Line 20:11:  'wave1' is assigned a value but never used      no-unused-vars
  Line 21:11:  'wave2' is assigned a value but never used      no-unused-vars
  Line 24:11:  'container' is assigned a value but never used  no-unused-vars
  Line 25:11:  'btn' is assigned a value but never used        no-unused-vars
  Line 26:11:  'color' is assigned a value but never used      no-unused-vars
  Line 27:11:  'tooltip' is assigned a value but never used    no-unused-vars

src/Components/Group/ShiningComponent.js
  Line 1:8:  'React' is defined but never used  no-unused-vars

src/Components/Memory/GroupModal.js
  Line 15:6:  React Hook useEffect has a missing dependency: 'props.groupMembers'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/Memory/MemoryModal.js
  Line 2:10:  'useNavigate' is defined but never used                                                                            no-unused-vars
  Line 2:23:  'useParams' is defined but never used                                                                              no-unused-vars
  Line 5:3:   'getArticlesApi' is defined but never used                                                                         no-unused-vars
  Line 7:3:   'getVideoApi' is defined but never used                                                                            no-unused-vars
  Line 8:3:   'getThumbnailApi' is defined but never used                                                                        no-unused-vars
  Line 9:3:   'getImageApi' is defined but never used                                                                            no-unused-vars
  Line 10:3:  'getArticleCount' is defined but never used                                                                        no-unused-vars
  Line 11:3:  'getTotalArticleCount' is defined but never used                                                                   no-unused-vars
  Line 29:6:  React Hook useEffect has a missing dependency: 'props.boardSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/Memory/MemoryModal2.js
  Line 2:10:  'useNavigate' is defined but never used                                                                            no-unused-vars
  Line 2:23:  'useParams' is defined but never used                                                                              no-unused-vars
  Line 5:3:   'getArticlesApi' is defined but never used                                                                         no-unused-vars
  Line 7:3:   'getVideoApi' is defined but never used                                                                            no-unused-vars
  Line 8:3:   'getThumbnailApi' is defined but never used                                                                        no-unused-vars
  Line 9:3:   'getImageApi' is defined but never used                                                                            no-unused-vars
  Line 10:3:  'getArticleCount' is defined but never used                                                                        no-unused-vars
  Line 11:3:  'getTotalArticleCount' is defined but never used                                                                   no-unused-vars
  Line 30:6:  React Hook useEffect has a missing dependency: 'props.boardSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/MemoryList/MemoryCard.js
  Line 1:17:  'useEffect' is defined but never used       no-unused-vars
  Line 1:28:  'useState' is defined but never used        no-unused-vars
  Line 1:38:  'useRef' is defined but never used          no-unused-vars
  Line 2:10:  'useNavigate' is defined but never used     no-unused-vars
  Line 2:23:  'useParams' is defined but never used       no-unused-vars
  Line 3:10:  'getArticlesApi' is defined but never used  no-unused-vars

src/Components/MemoryList/MemoryCardVideo.js
  Line 1:17:  'useEffect' is defined but never used       no-unused-vars
  Line 1:28:  'useState' is defined but never used        no-unused-vars
  Line 1:38:  'useRef' is defined but never used          no-unused-vars
  Line 2:10:  'useNavigate' is defined but never used     no-unused-vars
  Line 2:23:  'useParams' is defined but never used       no-unused-vars
  Line 3:10:  'getArticlesApi' is defined but never used  no-unused-vars

src/Components/MemoryList/MemoryComponent.js
  Line 1:38:  'useRef' is defined but never used                                                                           no-unused-vars
  Line 2:10:  'useNavigate' is defined but never used                                                                      no-unused-vars
  Line 5:3:   'getArticleApi' is defined but never used                                                                    no-unused-vars
  Line 6:3:   'getVideoApi' is defined but never used                                                                      no-unused-vars
  Line 7:3:   'getThumbnailApi' is defined but never used                                                                  no-unused-vars
  Line 8:3:   'getImageApi' is defined but never used                                                                      no-unused-vars
  Line 9:3:   'getArticleCount' is defined but never used                                                                  no-unused-vars
  Line 10:3:  'getTotalArticleCount' is defined but never used                                                             no-unused-vars
  Line 29:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/MemoryList/MemoryComponent2.js
  Line 1:38:  'useRef' is defined but never used                                                                           no-unused-vars
  Line 2:10:  'useNavigate' is defined but never used                                                                      no-unused-vars
  Line 5:3:   'getArticleApi' is defined but never used                                                                    no-unused-vars
  Line 6:3:   'getVideoApi' is defined but never used                                                                      no-unused-vars
  Line 7:3:   'getThumbnailApi' is defined but never used                                                                  no-unused-vars
  Line 8:3:   'getImageApi' is defined but never used                                                                      no-unused-vars
  Line 9:3:   'getArticleCount' is defined but never used                                                                  no-unused-vars
  Line 10:3:  'getTotalArticleCount' is defined but never used                                                             no-unused-vars
  Line 13:8:  'MemoryCard' is defined but never used                                                                       no-unused-vars
  Line 30:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/MemoryList/MemoryComponent3.js
  Line 1:38:   'useRef' is defined but never used                                                                           no-unused-vars
  Line 2:10:   'useNavigate' is defined but never used                                                                      no-unused-vars
  Line 8:3:    'getTotalUserArticleCountApi' is defined but never used                                                      no-unused-vars
  Line 9:3:    'getGroupArticleCountApi' is defined but never used                                                          no-unused-vars
  Line 20:8:   'MemoryCard' is defined but never used                                                                       no-unused-vars
  Line 21:8:   'MemoryCardVideo' is defined but never used                                                                  no-unused-vars
  Line 25:10:  'Cdata' is defined but never used                                                                            no-unused-vars
  Line 30:10:  'graphBtn' is assigned a value but never used                                                                no-unused-vars
  Line 30:20:  'setgraphBtn' is assigned a value but never used                                                             no-unused-vars
  Line 46:6:   React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 56:6:   React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 103:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/MemoryList/MemoryHead.js
  Line 1:38:  'useRef' is defined but never used                                                                           no-unused-vars
  Line 4:3:   'getArticlesApi' is defined but never used                                                                   no-unused-vars
  Line 5:3:   'getArticleApi' is defined but never used                                                                    no-unused-vars
  Line 6:3:   'getVideoApi' is defined but never used                                                                      no-unused-vars
  Line 7:3:   'getThumbnailApi' is defined but never used                                                                  no-unused-vars
  Line 8:3:   'getImageApi' is defined but never used                                                                      no-unused-vars
  Line 23:9:  'navigate' is assigned a value but never used                                                                no-unused-vars
  Line 41:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 52:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 62:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 81:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/NavBar/NavBar.js
  Line 3:8:   'styled' is defined but never used                                                                                                                                                                                                                                                                                                                                        no-unused-vars
  Line 24:9:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 44:9:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

src/Components/Statistics/Calendar.js
  Line 6:5:   'getGroupArticleCountApi' is defined but never used                                                          no-unused-vars
  Line 8:9:   'Cdata' is defined but never used                                                                            no-unused-vars
  Line 31:8:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/Statistics/LineChart.js
  Line 7:5:   'getGroupArticleCountApi' is defined but never used                                                          no-unused-vars
  Line 9:10:  'Ldata' is defined but never used                                                                            no-unused-vars
  Line 24:8:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 47:8:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/Components/Statistics/Piechart.js
  Line 5:5:   'getTotalUserArticleCountApi' is defined but never used                                                      no-unused-vars
  Line 39:8:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/pages/CreateGroup/CreateGroup.js
  Line 1:27:   'useEffect' is defined but never used              no-unused-vars
  Line 10:3:   'ShiningComponent' is defined but never used       no-unused-vars
  Line 11:3:   'ShiningContainer' is defined but never used       no-unused-vars
  Line 97:9:   'joinGroup' is assigned a value but never used     no-unused-vars
  Line 126:9:  'ShiningInput' is assigned a value but never used  no-unused-vars

src/pages/Home/Home.js
  Line 247:17:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md         jsx-a11y/anchor-is-valid
  Line 274:17:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md         jsx-a11y/anchor-is-valid
  Line 280:17:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

src/pages/Main/Main.js
  Line 6:8:     '$' is defined but never used                                                                                                                                                                                                                                                                                                                                             no-unused-vars
  Line 7:8:     'styled' is defined but never used                                                                                                                                                                                                                                                                                                                                        no-unused-vars
  Line 43:9:    'rotation' is assigned a value but never used                                                                                                                                                                                                                                                                                                                             no-unused-vars
  Line 49:6:    React Hook useEffect has a missing dependency: 'now'. Either include it or remove the dependency array                                                                                                                                                                                                                                                                    react-hooks/exhaustive-deps
  Line 166:11:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 171:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 175:19:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 188:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 192:19:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 206:11:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 233:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 235:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 237:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 258:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 260:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  Line 262:13:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more:https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

src/pages/MemoryList/MemoryList.js
  Line 1:38:  'useRef' is defined but never used                                                                                                                                                                                                                                             no-unused-vars
  Line 2:10:  'useNavigate' is defined but never used                                                                                                                                                                                                                                        no-unused-vars
  Line 5:3:   'getArticleApi' is defined but never used                                                                                                                                                                                                                                      no-unused-vars
  Line 6:3:   'getVideoApi' is defined but never used                                                                                                                                                                                                                                        no-unused-vars
  Line 7:3:   'getThumbnailApi' is defined but never used                                                                                                                                                                                                                                    no-unused-vars
  Line 8:3:   'getImageApi' is defined but never used                                                                                                                                                                                                                                        no-unused-vars
  Line 9:3:   'getArticleCount' is defined but never used                                                                                                                                                                                                                                    no-unused-vars
  Line 10:3:  'getTotalArticleCount' is defined but never used                                                                                                                                                                                                                               no-unused-vars
  Line 42:6:  React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array                                                                                                                                                                    react-hooks/exhaustive-deps
  Line 46:6:  React Hook useEffect has missing dependencies: 'articlesPhoto' and 'articlesVideo'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setArticlePhotoIndex' needs the current value of 'articlesPhoto'  react-hooks/exhaustive-deps

src/pages/Quiz/Quiz.js
  Line 1:38:  'useCallback' is defined but never used                                                                                                                                                                                                                                                         no-unused-vars
  Line 51:6:  React Hook useEffect has missing dependencies: 'groupSeq', 'navigate', 'problemIndex', 'problems', and 'score'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setProblem' needs the current value of 'problemIndex'  react-hooks/exhaustive-deps
  Line 62:6:  React Hook useEffect has missing dependencies: 'groupSeq' and 'problemIndex'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setProblem' needs the current value of 'problemIndex'                                    react-hooks/exhaustive-deps

src/pages/Statistics/Statistics.js
  Line 1:38:   'useRef' is defined but never used                                                                           no-unused-vars
  Line 2:10:   'useNavigate' is defined but never used                                                                      no-unused-vars
  Line 18:10:  'totalArticle' is assigned a value but never used                                                            no-unused-vars
  Line 18:24:  'setTotalArticle' is assigned a value but never used                                                         no-unused-vars
  Line 69:6:   React Hook useEffect has a missing dependency: 'groupSeq'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/pages/WriteBoard/VideoUploader.js
  Line 6:12:  'defaultImg' is assigned a value but never used     no-unused-vars
  Line 6:24:  'setDefaultImg' is assigned a value but never used  no-unused-vars

src/pages/WriteBoard/WriteBoard.js
  Line 7:10:   'writeMemoryApi' is defined but never used          no-unused-vars
  Line 26:22:  'setDefaultImg' is assigned a value but never used  no-unused-vars

Build step 'Execute shell' marked build as failure
Finished: FAILURE

해당 에러 로그를 확인해보면 빌드 중 다양한 모듈에서 경고 메시지가 떴고, 이로 인해 빌드가 실패했다고 생각했다. 하지만 실제 에러가 난 부분은 따로 있었다.

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

중간에 보면 이런 메세지가 보인다. 이 때 빌드가 실패했다.

원인

해당 에러는 리액트 어플리케이션을 빌드할 때 종종 나타나는 빌드 오류이다. 리액트는 CI라는 환경 변수가 기본적으로 true로 되어있는데, 요약하면 리액트의 경고를 빌드 오류로 처리한다는 것이다.

해결

가장 좋은 방법은 경고를 없애는 것이겠지만, 우회하는 방법도 존재한다.

빌드 명령어 앞에 CI=false를 추가로 붙여준다. → CI=false npm run build

profile
백엔드 개발자가 될거야

0개의 댓글