Jenkins & Next.js build 에러

next build

원인

jenkins에서 next build시 eslint 에러가 발생했기 때문에 서버가 작동하지 않았습니다.

코드를 살펴보니 지금까지 우리 프론트팀 모두가 eslint를 준수하지 않고 있었습니다. 🥲 (저의 경우 eslint가 제대로 작동하지 않고 있었습니다. 이 해결방법은 맨 아래에 적어두었습니다.)

해결방법

next build시 eslint를 준수하지 않아 error가 발생해도 이를 빌드 에러라고 인식하지 않도록 next.config.js 를 설정하였습니다.

// `next.config.js` 
...
module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
}
...

결과

로컬에서 빌드 성공

eslint 활성화 시키기

사태 파악

저의 경우 vscode 하단 problems에서 eslint가 활성화되지 않고 있었습니다.
(아니 나는 .. 잘 작성해서 작동안하는 줄 알았는데?? 아예 eslint가 동작하지 않았었네 대박 충격적)

해결방법

step 1. FatalError: error TS6046
이를 위해 필요한 패키지들이 잘 있는지 확인하였고 eslint server가 아예 안되길래 고치기 시작했습니다.
FatalError: error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'.

// tsconfig.json
....
    "moduleResolution": "Node", //bundle에서 node로 번경하였습니다.
...

step 2. ESLint couldn't find the plugin "@typescript-eslint/eslint-plugin"

@typescript-eslint/eslint-plugin도 계속 없다고 하길래
yarn add @typescript-eslint/eslint-plugin 를 다시 해주었습니다.

step 3. parsing error

이제 eslint가 동작하기는 하는데 parsing이 에러가 납니다.

ESLint의 기본 parser는 Espree로 기본적으로 ECMA 버전5로 설정되어있기 때문에 ECMA 버전6 이상 문법이나 Typescript 문법을 parse하면서 에러를 발생한다는 것을 알았습니다.
파싱 에러 해결하기 위해서

yarn add -D @typescript-eslint/parser eslint-plugin-html

// .eslintrc.json
...
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "html"] /* 추가*/,
...

그리고 나서 .eslintrc.json의 파일을 잘 찾도록 절대경로를 설정합니다.

// tsconfig.json
....
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    // add all files in which you see
    // the "parserOptions.project" error
    ".eslintrc.js" // parsing 에러 절대경로 설정
  ],
...

그리고 vscode를 npm 패키지가 있는 폴더로 다시 열어줬습니다. 바로 상위의 폴더를 열고 사용하고 있었는데 eslint가 .eslintrc.json의 파일을 못찾더라구요.

vscode에서 eslint 좀 쉽게 쓰기. auto fix and save

이것은 프로젝트 셋팅시 이미 설치하여 설정도 완료한 상태였습니다.

cmd + ⇧ + p 에서 setting.json 열어 아래와 같이 설정합니다

// settings.json
...
  "editor.codeActionsOnSave": {
	"source.fixAll": true,
  },
...

이제 vscode가 알아서 수정할 수 있는 것은 저장할때 잘 수정해줍니다