Nuxt.js + TypeScript環境を、create nuxt-appで作るときにハマった話

個人開発するかーと息巻いて、環境を作ろうとしたら早速ハマったのでメモ。
TypeScriptで開発したく、今はcreate nuxt-appで言語も選択できるようになってるみたいだから、環境は一瞬でできるだろーと思ってやってみたら、動きませんでした。。

ちなみにこの記事は、2020/09/17時点に試した時のものです。
Nodeはv12.13.0。

## とりあえずcreate nuxt-app

```
$ yarn create nuxt-app nuxt-test

Project name: そのまま（enter）
Package manager: Yarn
Programming language: TypeScript
UI framework: None
Nuxt.js modules: Axios
Linting tools: ESLint, Prettier, StyleLint
Testing framework: None
Rendering mode: Universal (SSR / Static)
Deployment target: Server (Node.js hosting)
Development tools: 選択無し

$ cd nuxt-test
$ yarn dev
```

するとこういうエラーが、、、

```
 ERROR  Failed to compile with 1 errors                                                                                                                                           friendly-errors 11:48:41

This relative module was not found:                                                                                                                                               friendly-errors 11:48:41
                                                                                                                                                                                  friendly-errors 11:48:41
* ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue
```

念のためブラウザでも確認してみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47240/c08b9e56-8c6b-48e1-b7a0-ca324b70824d.png)

```
Error
Cannot find module './index.vue?vue&type=script&lang=ts&'
```

当然エラー

## Nuxt Typescriptの公式ドキュメントを見る

https://typescript.nuxtjs.org/ja/guide/setup.html#%E3%83%A2%E3%82%B7%E3%82%99%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%AA%E3%83%95%E3%82%9A%E3%82%B7%E3%83%A7%E3%83%B3

`セットアップ > 設定` の項を見てみると、下記だけ設定されていなかったので、 `vue-shim.d.ts` を作り、プロジェクト直下に置いてみる。

```
以下の型宣言を追加し Vue ファイルの型を提供する必要があります：

vue-shim.d.ts:

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}
```

もう一度 `yarn dev` してブラウザで確認してみたが、まだエラーは消えず。。

公式ドキュメントを読み進めていると、package.jsonにも差分があることがわかりました。

https://typescript.nuxtjs.org/ja/guide/runtime.html#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

**create nuxt-app後の素の状態**

```
"dependencies": {
  "@nuxt/typescript-runtime": "^1.0.0",
  "@nuxtjs/axios": "^5.12.0",
  "nuxt": "^2.14.0"
},
"devDependencies": {
  "@nuxt/types": "^2.14.0",
  "@nuxt/typescript-build": "^2.0.2",
  "@nuxtjs/eslint-config": "^3.1.0",
  "@nuxtjs/eslint-config-typescript": "^3.0.0",
  "@nuxtjs/eslint-module": "^2.0.0",
  "@nuxtjs/stylelint-module": "^4.0.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^7.5.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-nuxt": "^1.0.0",
  "eslint-plugin-prettier": "^3.1.4",
  "prettier": "^2.0.5",
  "stylelint": "^13.6.1",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-standard": "^20.0.0"
}
```

**公式**

```
"dependencies": {
  "@nuxt/typescript-runtime": "latest",
  "nuxt": "latest"
},
"devDependencies": {
  "@nuxt/types": "latest",
  "@nuxt/typescript-build": "latest"
}
```

公式をマージして下記のようにしました

```
"dependencies": {
  "@nuxt/typescript-runtime": "latest",
  "@nuxtjs/axios": "^5.12.0",
  "nuxt": "latest"
},
"devDependencies": {
  "@nuxt/types": "latest",
  "@nuxt/typescript-build": "latest",
  "@nuxtjs/eslint-config": "^3.1.0",
  "@nuxtjs/eslint-config-typescript": "^3.0.0",
  "@nuxtjs/eslint-module": "^2.0.0",
  "@nuxtjs/stylelint-module": "^4.0.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^7.5.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-nuxt": "^1.0.0",
  "eslint-plugin-prettier": "^3.1.4",
  "prettier": "^2.0.5",
  "stylelint": "^13.6.1",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-standard": "^20.0.0"
}
```

`yarn install` します。

一部バージョンが更新されました。

**create nuxt-app後の素の状態で入ってきたバージョン**

```
@nuxt/typescript-runtime: 1.0.0
nuxt: 2.14.5
@nuxt/types: 2.14.5
@nuxt/typescript-build 2.0.3
```

**latestに変更後**

```
@nuxt/typescript-runtime: 2.0.0 ← これだけバージョンアップしてる
nuxt: 2.14.5
@nuxt/types: 2.14.5
@nuxt/typescript-build: 2.0.3
```

更新が必要なのは、 `@nuxt/typescript-runtime` だけのようなので、それ以外のpackage.jsonのバージョンを戻します。

```
"dependencies": {
  "@nuxt/typescript-runtime": "^2.0.0",
  "@nuxtjs/axios": "^5.12.0",
  "nuxt": "^2.14.0"
},
"devDependencies": {
  "@nuxt/types": "^2.14.0",
  "@nuxt/typescript-build": "^2.0.2",
  "@nuxtjs/eslint-config": "^3.1.0",
  "@nuxtjs/eslint-config-typescript": "^3.0.0",
  "@nuxtjs/eslint-module": "^2.0.0",
  "@nuxtjs/stylelint-module": "^4.0.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^7.5.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-nuxt": "^1.0.0",
  "eslint-plugin-prettier": "^3.1.4",
  "prettier": "^2.0.5",
  "stylelint": "^13.6.1",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-standard": "^20.0.0"
}
```

`yarn dev` してみます。

無事表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47240/f48c9469-d4bf-08fe-9fcc-1a27f7890be6.png)

## まとめ
あとで試しましたが、 `vue-shim.d.ts` がなくてもビルドは通りました。
問題は `@nuxt/typescript-runtime` のバージョンだけみたいです。
Nuxt Typescriptの公式ドキュメント見ながら環境作れば動くものの、create nuxt-appに組み込んでいるなら最初から動くようにしておいてほしい。。