[Node.js] npm ERR! JSON.parse Unexpected end of JSON input while parsing empty string

npm eslint --init 실행 에러

 

상황 정리

1. 가장 최상위 폴더에 eslint 설치 후 , elsint --init 명령어 가 실행되지 않았다. 

2. 최상위 폴더는 node.js환경만 구성되어있고, npm init 은 실행 하지 않음

3. npm uninstall 명령으로 eslint 삭제 

4. eslint 설치 이전에는 Package.json파일이 생성되지 않았으므로, package.json 파일을 제거해줌

{}

( uninstall 이후에는 이렇게 생성되어 있었다 )

 

5. npm 이 init 되어있는 하위 폴더로 이동하여 npm install eslint 실행 

✗ npm install eslint
npm ERR! code EJSONPARSE
npm ERR! path /Users/jeonghye/Desktop/code/prac_Node.js/package.json
npm ERR! JSON.parse Unexpected end of JSON input while parsing empty string
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.

위와같은 에러메세지가 출력되었다. 

 

 

sol 1 ) npm cache clean

stackoverflow 내에서 찾아보니 

npm cache clean

명령어를 사용하면 해결 가능하다고 해서 실행 

 

npm ERR! As of npm@5, the npm cache self-heals from corruption issues
npm ERR!   by treating integrity mismatches as cache misses.  As a result,
npm ERR!   data extracted from the cache is guaranteed to be valid.  If you
npm ERR!   want to make sure everything is consistent, use `npm cache verify`
npm ERR!   instead.  Deleting the cache can only make npm go slower, and is
npm ERR!   not likely to correct any problems you may be encountering!
npm ERR! 
npm ERR!   On the other hand, if you're debugging an issue with the installer,
npm ERR!   or race conditions that depend on the timing of writing to an empty
npm ERR!   cache, you can use `npm install --cache /tmp/empty-cache` to use a
npm ERR!   temporary cache instead of nuking the actual one.
npm ERR! 
npm ERR!   If you're sure you want to delete the entire cache, rerun this command
npm ERR!   with --force.

했더니 npm@5 부터는 --force 명령어로 실행해야한다고 해서 일단 중지

예전에도 캐시 잘못 건드렸다가 이상하게 된 적이 있어서 더 할 수 없었음 ㅠㅠ...

 

 

sol 2 ) package.json 문법 오류 체크

더 찾아보니 npm cache clean 이전에 package.json 문법 오류를 먼저 체크하길 권장 한다고 한다. 

하지만 package.json내부의 코드를 아무리 찾아봐도 문법 오류가 없었는데

최상위 폴더의 package.json을 건드린 게 생각나서 원래대로 복구 해주었다.

{}

 

(package.json이 공백 파일이었는데, 이것만 추가해주었다)

 

 

저장하고, 하위 폴더에서 eslint install을 실행했더니,

최상위 폴더의 package.json에 dependencies가 아래와 같이 추가되었다. 

devDependencies도 아니고 dependencies로 추가되어있었다..

{
  "dependencies": {
    "package.json": "^2.0.1"
  }
}

 

 

 

 

 

 

다시 하단 폴더로 가서 eslint 설치했더니 이것은 무리없이 실행되었다.

근데 자꾸 최상위 폴더에 dependencies가 추가됨

 

{
  "dependencies": {
    "eslint": "^8.57.0",
    "package.json": "^2.0.1"
  }
}

(이후 최상위 폴더의 package.json이 위와 같이 변경됨)

 

 

package.json 내에 package.json 이 설치되어있는 경우는 찾아봐도 예시가 없고, node특성상 라이브러리가 너무 복잡해질 것 같아서

 

--save 옵션을 주어 package.json을 uninstall 실행, 

하위 폴더와 최상위 폴더에서도 eslint uninstall --save  실행해주었다.

npm uninstall package.json --save
npm uninstall eslint --save

 

 

다시 최상위 package.json은 아래와 같이 변함

{}

 

 

 

하위에서 install eslint 했더니 또다시 최상위의 dependencies에 eslint 설치됨

두 번이나 같은 루트로 설치되니, 정상대로 실행되고 있는 것이 맞다는 판단에 이르름

 

eslint --init

 

 

명령어로 init 하려고 했으나, 최상위에서도, 하단에서도 실행되지 않았다. 

zsh: command not found: eslint

설치 되어있는데~~~ 위와 같이 에러메세지 출력되었다..

 

 

sol 3) npx eslint --init

 

npx eslint --init

으로 실행 이후 해결되었으며, 

 

최상위 폴더의 package.json 의 dependencies 는 devDependencies로 바뀌어있었다 (!)

{
  "devDependencies": {
    "eslint": "^8.57.0"
  }
}

 

---

왜 이런 일이 발생했는가

 

eslint --init과 npx eslint --init의 차이

eslint --init : 이미 글로벌로 eslint가 설치되어 있다고 가정한다. 따라서 글로벌로 설치되지 않은 경우에는 이 명령어가 작동하지 않을 수 있다.

npx eslint --init : 현재 디렉토리에 있는 node_modules 내에 eslint가 있는지 확인하고, 없으면 임시로 eslint를 설치하여 실행

https://github.com/eslint/eslint/issues/11862

`eslint --init` failed · Issue #11862 · eslint/eslint

 

 

상위 디렉토리의 nodemodules에 패키지가 설치되었던 이유

npm 이 작동하는 방식을 충분히 고려하지 않았기 때문이다.

 

1. npm은 현재 작업 중인 디렉토리에서 package.json 파일을 찾는다.
2. package.json 파일이 발견되면 해당 파일 내의 node_modules 폴더를 찾는다.
3. node_modules 폴더가 발견되지 않으면 상위 디렉토리로 이동하여 위의 단계를 반복한다. 
4. 최상위 디렉토리까지 이동하여 node_modules 폴더가 발견되지 않으면 새로운 node_modules 폴더를 생성하고 패키지를 설치한다.

npm은 최상위 디렉토리까지 올라가서 node_modules 폴더를 찾지는 않는다. 대신 가장 가까운 상위 디렉토리에서부터 찾아서 패키지를 설치한다. 따라서 B 폴더 내에서 npm install을 실행하면 B 폴더 내의 node_modules 폴더에 패키지가 설치된다. 이 때, A 폴더의 package.json에 eslint와 같은 개발 의존성이 정의되어 있다면, 해당 패키지도 A 폴더의 node_modules 폴더에 설치된다.

 

 

 

첫 번째 오류로 삽질을 시작했는데 상위 폴더의 package.json에 dependencies로 추가되는 문제는 이해가 안 가서 조금 더 매달렸던 것 같다.

프로젝트 파일 구조를 좀더 생각했으면 상위에 설치되는 게 당연하다고 생각했을텐데 진작에 떠올리지 못해서 아쉬웠다.

 

---

참고로 eslint 설정은 아래와 같이 설정해주었다 ( npm, JS만을 이용하는 프로젝트이며 typeScript 등 도입시 설정 변경 가능)

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing eslint@latest
npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslint

up to date, audited 100 packages in 453ms

 

---

ref : https://stackoverflow.com/questions/31454607/npm-failed-to-parse-json

npm "failed to parse json"

https://github.com/eslint/eslint/issues/11862