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

ysys님의 프로필 이미지

작성한 질문수

나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨)

npm start 가 되지 않습니다.

해결된 질문

작성

·

4.1K

0

좋은 강의 만들어주셔서 감사합니다.

강의와 질의응답 내용들을 참고하여 현재 프로젝트 파일 설치까지 완료하였으나, npm start가 되지 않고 있어 문의글을 남깁니다.  

프로젝트 생성을 위해 사용한 명령어는 다음과 같습니다.

npm install -g create-tidory-app 

npx create-tidory-app second-app

cd second-app/

second-app 경로 아래에서 ls 를 한 결과: 

app.pug  docs/    index.pug  package.json       README.md         views/
assets/  images/  LICENSE    package-lock.json  tidory.config.js

package.json 안에 내용은 다음과 같았습니다. 

$ cat package.json 
{
  "scripts": {
    "start": "cross-env NODE_ENV=development tidory start",
    "preview": "cross-env NODE_ENV=development tidory preview",
    "build": "cross-env NODE_ENV=production tidory build",
    "build:compress": "cross-env NODE_ENV=build tidory build --compress",
    "deploy": "tidory deploy",
    "store": "tidory store",
    "lint": "eslint --ext .js assets tidory.config.js"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/tidory/tidory"
  },
  "devDependencies": {
    "cheerio": "^1.0.0-rc.2",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1"
  },
  "dependencies": {
    "@tidory/default-header": "github:tidory/default-header",
    "@tidory/default-sidebar": "github:tidory/default-sidebar",
    "tidory": "^7.2"
  }
}

강의에서와 달리 root 경로 아래에 package-lock.json은 설치되어 있었지만 node_modules가 설치되어 있지 않아서 package-lock.json 파일을 삭제해주고 npm install 명령어를 실행시켜 주었습니다.  

rm -rf package-lock.json && npm install

vulnerabilities 가 존재하여 npm audit fix 명령어를 실행시켜 주었습니다.

npm audit fix

$ npm audit fix
npm WARN acorn-jsx@5.2.0 requires a peer of acorn@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 2 packages from 4 contributors and updated 4 packages in 10.093s

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

fixed 21 of 26 vulnerabilities in 11404 scanned packages
  5 vulnerabilities required manual review and could not be updated

그런 다음에 npm start 명령어를 실행시켜주었으나, 다음과 같은 error가 났습니다. 

npm start

$ npm start

> @ start C:\Users\John Doe\git\second-app
> cross-env NODE_ENV=development tidory start

internal/modules/cjs/loader.js:976
  throw err;
  ^

Error: Cannot find module 'C:\Users\John'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:973:15)
    at Function.Module._load (internal/modules/cjs/loader.js:855:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

'C:\Users\John' 을 못찾는 이유가 John Doe 처럼 가운데 띄어쓰기가 있는 경로여서 모듈을 못찾는 것일까요? ㅠㅠ (이름은 임의로 변경하였습니다.) 

혹시 제가 간과하고 넘어간 부분이 있다면 알려주시면 감사하겠습니다. 😊

답변 4

1

ysys님의 프로필 이미지
ysys
질문자

말씀해주신대로 티도리 프로젝트 템플릿 (second-app) C:\tidory\ 로 옮겨서 npm start 명령어를 다시 시도해보았더니 아래와 같이 프로젝트 첫 화면을 확인할 수 있었습니다. 늦은 시간까지 도움 주셔서 감사합니다! 😊

$ npm start

> @ start C:\tidory\second-app
> cross-env NODE_ENV=development tidory start

Project is running at http://localhost:8080/
webpack output is served from /
webpack: wait until bundle finished: /

webpack: Compiled successfully.

1

정상우님의 프로필 이미지
정상우
지식공유자

create-tidory-app 의 경로는 중요하지 않습니다.
바꿔야 하는 것은 티도리 프로젝트 템플릿이 다운로드 되어있는 경로입니다.

second-app 이 위치하는 절대 경로에 공백이 포함에 있는 것을 볼 수 있습니다.

Windows Username 에 공백이 있는 것이 주요 원인이므로
사용자의 이름이 포함되지 않는 경로(예를 들면 C:\)로 second-app 을 옮기면 해결 될 것으로 생각됩니다.

0

ysys님의 프로필 이미지
ysys
질문자

빠른 답변 감사합니다!

예전에 windows OS에서 nvm을 설치하다가 이와 비슷한 경우가 있었어서 github issue 에 있는 comment를 뒤져서 해결했던 적이 있었는데요. 

당시 참고했던 url: https://github.com/coreybutler/nvm-windows/issues/41#issuecomment-464799741

cmd 창을 관리자 권한으로 실행한 다음, dir /?dir /X 명령어를 입력해줘서 경로를 구했었습니다.

C:\Users>dir /?
디렉터리에 있는 파일과 하위 디렉터리 목록을 보여 줍니다.
( 자체 생략 ... )
  /X          8dot3 파일 이름이 아닌 파일에 대한 짧은 이름을 보여 줍니다
              이 형식은 긴 이름 앞에 짧은 이름이 추가된 것으로 /N 포맷과
              같습니다. 짧은 이름이 없으면
              공백을 보여 줍니다.
  /4          4자릿수 연도를 표시합니다.


스위치를 DIRCMD 환경 변수로 미리 설정할 수 있습니다. 하이픈(-)을
스위치 앞에 접두사로 붙이면 미리 설정된 스위치를 재정의합니다(예, /-W).


C:\Users>dir /X
C 드라이브의 볼륨에는 이름이 없습니다.
볼륨 일련 번호: 846D-6E73


C:\Users 디렉터리


2020-01-04  오전 12:33    <DIR>                       .
2020-01-04  오전 12:33    <DIR>                       ..
2019-09-06  오전 01:27    <DIR>                       Public
2020-01-19  오후 10:53    <DIR>          JOHN~1     John Doe
               0개 파일                   0 바이트
               4개 디렉터리  156,419,928,064 바이트 남음

당시 nvm의 경우 root 경로 아래에 setting.txt 파일이 있어서 그곳의 root 경로를 수정해주는 것을 통해 에러를 해결했었는데요.

$ nvm root

Current Root: C:\Users\JOHN~1\AppData\Roaming\nvm

create-tidory-app의 경우, 혹시 어디에서 프로젝트 경로를 수정하면 되는 것인지 알려주시면 감사하겠습니다.  

현재 create-tidory-app 설치 경로

C:\Users\JOHN~1\AppData\Roaming\nvm\v13.6.0\node_modules\create-tidory-app

해당 create-tidory-app 경로 아래에 파일

$ ls -a
.   create-tidory-app      create-tidory-app.ps1  node_modules  npm.cmd  npx.cmd
..  create-tidory-app.cmd  node.exe               npm           npx

감사합니다 😊

0

정상우님의 프로필 이미지
정상우
지식공유자

안녕하세요. :)

Q. 'C:\Users\John' 을 못찾는 이유가 John Doe 처럼 가운데 띄어쓰기가 있는 경로여서 모듈을 못찾는 것일까요?
A. 이미 정답을 말씀하셨습니다. 프로젝트 경로를 바꿔주셔야 해요 ㅜㅜ

ysys님의 프로필 이미지

작성한 질문수

질문하기