【Typescript備忘録】nodemonが実行できない問題

Typescriptを学習中にnodemonに触れる機会があり、
なぜか実行できない問題が発生した。

ネットで調べてもそれらしい情報が中々出てこなかったので、忘れない内に記録に残しておこうと思う。

# 目次
**今回のゴール**

**環境**

**エラーについて**

**実行手順（再現方法）**

**対策**

# ◆今回のゴール
TypescriptとNode.jsを利用して、簡単なプログラムを作成する。
その際tsファイルはjsファイルにコンパイルし、
できたjsファイルは **<font color="blue">nodemon</font>** を利用し、変更される度に自動で実行し直すような状況にする。

**■<font color="blue">nodemon</font>**
node.jsが変更されると実行し直してくれるパッケージ。

# ◆環境
**【使用PC】**
**Mac Book Pro**
・Ver : 12.6
・macOS Monterey

**【エディター】**
**VSCode**
・ Ver : 1.71.2

**【その他】**
**Typescript**
・ Ver : 4.8.3

**Node.js**
・ Ver : 14.17.4

**nodemon**
・ Ver : 2.0.20

**【プロジェクトのディレクトリ階層】**
![スクリーンショット 2022-10-03 22.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/c0389887-0c87-7a24-ee8f-f1e6736cea35.png)

**【package.jsonの設定】**
```javascript
{
  "name": "learning-history_2",
  "version": "1.0.0",
  "description": "learning-history",
  "main": "index.js",

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon dist/app.js"
  },

  "repository": {
    "type": "git"
  },

  "author": "author",
  "license": "ISC",

  "devDependencies": {
    "@types/node": "^18.7.21",
    "nodemon": "^2.0.20",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.3",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
}
```

**【tsconfig.jsonの設定】**
```javascript
{
  "compilerOptions": {
    
    "target": "ES2019",
    "module": "ES6",
    "rootDir": "./src",
    "moduleResolution": "node",
    "outDir": "./dist",  
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true ,
    "skipLibCheck": true
  },
  "files": ["./src/sample.ts", "src/sample.d.ts"]
}
```

# ◆エラーについて
srcディレクトリ内にある、app.tsファイルを対象に、nodemonを適応しながら簡単なプログラムを作成していく。
![スクリーンショット 2022-10-03 22.37.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/4a808169-2b06-6012-afd3-41d2d62cac0f.png)

package.json内で実行コマンドを設定しているので、
```javascript
"scripts": {
    "start": "nodemon dist/app.js"
  },
```
`npm run start`で実行すると、以下のようなエラーが発生する。
```
Learning-History_2 % npm run start

> learning-history_2@1.0.0 start
> nodemon dist/app.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node dist/app.js index.js`
internal/modules/cjs/loader.js:892
  throw err;
  ^

Error: Cannot find module '/Users//Desktop/Learning-History_2/index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
[nodemon] app crashed - waiting for file changes before starting...
```

# ◆実行手順
**①ルートディレクトリに移動（今回ならLearning-History_2）**

**②ルートディレクトリ直下で、`npm run start`を実行。**

**②'この時、app.tsファイルの中は何も記載していない。**

**③エラー発生。**

# ◆対策
当然といえば当然なのだが、tsconfig.jsonファイルにて、
**files設定**が入っていたのが原因で、app.tsのコンパイルが含まれていなかった。

```javascript
"files": ["./src/sample.ts", "src/sample.d.ts"]
```
tsconfig.jsonの設定を使い回ししていたせいで、この設定ミスに気付かなかったのが根本的な原因。

files設定をコメントアウトしたところ、無事コンパイルされ、nodemonも実行できた。
```
Learning-History_2 % npm run start

> learning-history_2@1.0.0 start
> nodemon dist/app.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node dist/app.js`
[nodemon] clean exit - waiting for changes before restart
[nodemon] restarting due to changes...
[nodemon] starting `node dist/app.js`
```
app.jsも無事作成され、console文を追記して保存したところ、
変更分も反映された。
![スクリーンショット 2022-10-03 23.02.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/4e2088fa-163b-3043-dc7b-1da445e05017.png)

```
[nodemon] starting `node dist/app.js`
hi
[nodemon] clean exit - waiting for changes before restart
```

# ◆ふりかえり

ネットでも以下のエラー文にフォーカスされている事が多く、index.jsに原因があるように思われるかもしれないが、他の場所に原因がある場合もあるという事を学んだ。


```
Error: Cannot find module '/Users//Desktop/Learning-History_2/index.js'
```

上記エラーが全て今回の自分の対策で解決できるとは思わないが、
このエラーが発生した時は基本的に設定回り（package.json,tsconfig.jsonなど）が間違っていると考えて良いと思う。