인프런 커뮤니티 질문&답변

네 ㅜㅜ 답변해주신 내용 수정한 뒤 재빌드를 해보니 계속 오류가 발생해서

욕심을 버리고 제로초님 강의대로 eslint설치하고 다시 실행해봤습니다.

(eslint는 8버전 사용시 오류가 발생해서 7버전으로 설치해서 빌드를 진행했습니다.)

근데 다음과 같은 오류가 발생해서 추가로 질문드리겠습니다.

error - ESLint: .eslintrc » eslint-config-airbnb » C:\Users\Administrator\OneDrive\Desktop\Recipe.io\prepare\front\node_modules\eslint-config-airbnb\node_modules\eslint-config-airbnb-base\index.js » C:\Users\Administrator\OneDrive\Desktop\Recipe.io\prepare\front\node_modules\eslint-config-airbnb\node_modules\eslint-config-airbnb-base\rules\best-practices.js:  
Configuration for rule "prefer-regex-literals" is invalid:       
Value [{"disallowRedundantWrapping":true}] should NOT have more than 0 items.

오류에는 "prefer-regex-literals" 규칙 구성이 잘못되었다고 해서 구글링을 통해 다음과 같이 rule을 추가 했습니다.

 "prefer-regex-literals": [
      "error",
      {
        "disallowRedundantWrapping": true
      }
    ]

근데 동일한 오류가 계속 발생하더라고요. 그래서 혹시 해당 문제에 대해서 해결할 수 있는 방법이 있을까요?

참고 해당 오류를 제외하고는 정상적으로 빌드결과가 출력됩니다!!

수정한 코드 첨부하겠습니다.

{
  "name": "recipe.io",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next -p 3060",
    "build": "next build"
  },
  "author": "Mirrer",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.21.3",
    "axios": "^0.27.2",
    "babel-plugin-styled-components": "^2.0.7",
    "dayjs": "^1.11.5",
    "immer": "^9.0.15",
    "next": "^12.1.6",
    "next-redux-wrapper": "^6.0.2",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "redux": "4.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.1.3",
    "shortid": "^2.2.16",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.3.1",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "airbnb"
  ],
  "plugins": [
    "import",
    "react-hooks"
  ],
  "rules": {
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "no-param-reassign": "off",
    "prefer-regex-literals": [
      "error",
      {
        "disallowRedundantWrapping": true
      }
    ]
  }
}

저걸 off로 하면 에러 안 뜨나요?

답변 감사합니다. 말씀해주신 내용과 구글링을 통해서 해결해보려고 했지만 실패해서 실습에 있는 버전과 동일하게 eslint관련 패키지를 설치했습니다.

빌드는 정상적으로 진행이 되는데 과정에서 다음과 같이 eslint error가 발생이 되고있습니다.

해당 관련코드를 확인해봐도 큰 문제는 없어보이는데 혹시 rules에 없는 부분이라 에러가 발생하는걸까요?

참고자료 함께 첨부하겠습니다 답변해주시면 감사하겠습니다.

빌드시 출력된 에러로그

info  - Checking validity of types
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
error - ESLint: Cannot read properties of null (reading 'value') Occurred while linting C:\Users\Administrator\OneDrive\Desktop\Recipe.io\prepare\front\components\PostingForm\PostingUpload.js:64
                                           :
                                           :

로그에서 언급된 코드

  const editPostImages = editPost?.Images.map((v) => {
    return {
      uid: v.uid,
      name: v.src,
      status: 'done',      
      thumbUrl: `http://localhost:3065/${v.src}`,
    }
  });

package.json

 "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.14.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0"
  }

.eslintrc

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "airbnb"
  ],
  "plugins": [
    "import",
    "react-hooks",
    "jsx-a11y"
  ],
  "rules": {
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-console": "off",
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "no-param-reassign": "off"
  }
}

실습을 prepare 폴더에서 하고계신게 맞나요?

답변 감사합니다.

네 실습은 강의대로 prepare폴더에서 front, back폴더를 생성해서 진행하고 있습니다.

또한 npm run build명령어 또한 강의대로 front에서 실행했습니다.

추가로 관련 정보를 구글링해서 babel-eslint의 버그라는것을 확인했습니다.

해당 오류가 출력되는 것이외에 빌드결과는 정상적으로 출력되는데 무시하고 실습을 진행해도될까요?

네네 무시하고 진행하세요.

항상 빠른 답변 감사드립니다.