eslint should be listed in the project's dependencies.

[5wintaek]

문제점

'react-daum-postcode' should be listed in the project's dependencies. Run 'npm i -S react-daum-postcode' to add it. 이라는 eslint 오류 발견

패키지가 프로젝트의 종속성 목록에 포함되어 있지 않아서 발생하는 문제점이다.

하지만 사진과 같이 종속성 목록에 포함이 되어있는데도 eslint 오류가 뜨는 모습

해결방법

(1) 오류에 나와있는 npm i -S react-daum-postcode 라는 명렁어를 실행하여 종속성 목록에 추가를 했다.

여기서 S란 패키지를 설치하고 종속성으로 추가하는 방법이다. 하지만 해결되지 않았다.

(2) eslintrc.json 에서 오류를 직접 끄는 방법이다.
"import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], 부분에서 error -> off로 끄는 방법을 선택하였다. 하지만 직접적인 원인 방법을 해결하지 못해서 글을 남긴다.

출처 : https://stackoverflow.com/questions/44939304/eslint-should-be-listed-in-the-projects-dependencies-not-devdependencies

[ukssss]

"import/no-extraneous-dependencies" 는 package.json의 종속성, devDependencies, optionalDependencies, peerDependencies, 번들 종속성에서 선언되지 않은 외부 모듈을 가져오지 못하도록 금지합니다. 라는 규칙입니다.

현재 상황에서는 "react-daum-postcode" 패키지가 정상적으로 package.json 파일에 명시되어 있는데 오류가 발생하였습니다. 이로 인해 규칙을 다음과 같이 변경하여 진행해 보았습니다.

"import/no-extraneous-dependencies": ["error", {"devDependencies": false, "optionalDependencies": false, "peerDependencies": false}]

위의 설정은 개발용, 선택적, 그리고 동료 의존성을 모두 허용하지 않고, 해당 종류의 의존성을 사용하는 코드에 대해 오류를 발생시키도록 설정하고 있습니다. 이 설정은 주로 프로덕션 코드에 외부 의존성을 추가할 때 오류를 방지하며, 깨끗한 코드를 유지하는 데 도움이 된다 생각합니다.

이를 통해 다음과 같은 코드를 통해 오류가 해결되었는지 테스트 해보았습니다.

// Test.jsx

import { useState } from 'react'
import DaumPostcode from 'react-daum-postcode'

const Test = () => {
  const [openPostcode, setOpenPostcode] = useState(false)

  const handle = {
    clickButton: () => {
      setOpenPostcode((current) => !current)
    },

    selectAddress: (data) => {
      console.log(`
        주소: ${data.address},
        우편번호: ${data.zonecode}
      `)
      setOpenPostcode(false)
    }
  }

  return (
    <div>
      <button type="button" onClick={handle.clickButton}>
        toggle
      </button>

      {openPostcode && (
        <DaumPostcode
          onComplete={handle.selectAddress}
          autoClose={false}
          defaultQuery="판교역로 235"
        />
      )}
    </div>
  )
}

export default Test

결과는 다음과 같습니다.

eslint 오류 없이 정상적으로 코드가 입력된 모습입니다.

• 실행 결과

dev 브랜치로 해당 규칙을 수정해서 푸시해둘테니 참고 부탁드립니다. 감사합니다 :)

---

참고 자료 : https://stackoverflow.com/questions/43989739/why-and-how-can-i-fix-eslint-import-no-extraneous-dependencies-failures-on-ins