Module not found Error 해결방법

Module not found: Error: Can't resolve ~
ReactJS프로젝트 중 Javascript에서 Typescript로 옮겨가던 중
VSCode에 빨간줄이 없는데도 npm start를 하면 컴파일 에러가 났다.

 

 

구글링을 해보니 많은 사람들이
node_modules 폴더
package-lock.json
삭제하고

npm install

실행하여 package.json대로 노드모듈을 다시 다운받고 npm start 하면 해결이 된다고 하는데 여전히 에러 발생.

해결방법

타입스크립트를 사용할 때 tsconfig.json은 필수 파일이다.
타입스크립트를 설치하는 과정에서

npx create-react-app react-masterclass --template typescript 대신
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

코드로
create-react-app Doc에 나와있는대로 설치를 했고, 필수 파일들도 설치되었을 것이라고 생각했지만 어떤 이유에서인지 tsconfig.json이 자동으로 생성되지 않았다. 그래서 발생한 에러였다.

typescript를 사용할 때 tsconfig.json 파일이 필수로 있어야 하는데 루트디렉토리에 존재하지 않을 때 수동으로 만들어주자.

//tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"lib": ["ES2015", "dom"],
"module": "commonjs",
"outDir": "dist",
"esModuleInterop": true,
"sourceMap": true,
"strict": true,
"target": "ES2015"
},
"include": ["src"]
}

다시 npm start로 서버를 실행하면,

해결 !

이전 블로그(hahagarden.github.io)에서 이전해온 글입니다.