Edited at

Nuxt 2.8の生成するtsconfig.jsonを使うとIntelliJ(WebStorm、PhpStorm等)がCannot find moduleエラーを吐く

※本記事の修正方法は、試行錯誤の結果導き出したもので、Nuxtのビルドシステムの全体的な理解を欠いた不十分なソリューションである可能性があります。ご了承ください


不具合の概要

Nuxt.jsでプロジェクトを作成し、公式の手順でTypeScriptサポートを有効にすると、IntelliJ系のIDEが以下のように「TS2307: Cannot find module」エラーを吐く状態になってしまいます。

※手元の環境はWebStorm 2019.1.3、Nuxt 2.8.1、TypeScript 3.5.3


直し方

*.vue の型定義を shims-vue.d.ts という名前で作成し、これをプロジェクトのルートディレクトリに置きます。


shims-vue.d.ts

declare module '*.vue' {

import Vue from 'vue'
export default Vue
}

次に、tsconfig.json の設定を調整し、 *.vue (と、ついでにtsも)をincludeします。


tsconfig,.json

  "files": [

"shims-vue.d.ts"
],
"include": [
"components/**/*.ts",
"components/**/*.vue",
"layouts/**/*.ts",
"layouts/**/*.vue",
"pages/**/*.ts",
"pages/**/*.vue"
],
"exclude": [
"node_modules"
]

これによって、IDEのエラーが消え、モジュールの解決が動作するようになります。

修正後のプロジェクトは以下のリポジトリに置いてます。

https://github.com/ryo-utsunomiya/nuxt-ts

shims-vue.d.ts がなぜ必要かについては以下のissueに詳しいです。

https://github.com/vuejs/vue-cli/issues/1198

簡単にいうと、実際のビルドには不要ですが、IDE(WebStorm/VSCode等)がCannot find moduleエラーを吐かないようにするために必要なファイルです。ちなみに、vue-cliでTypeScriptサポートを有効にした場合はsrc配下に配置されます。


Nuxt + TypeScriptプロジェクトの構築手順

本記事で使用したプロジェクトの構築手順を、最後に書いておきます。

npx create-nuxt-app nuxt-ts

選択はミニマムで(パッケージマネージャはyarnにしてますがnpmでも問題ないです)。

cd nuxt-ts

yarn add -D @nuxt/typescript
yarn add ts-node
touch tsconfig.json
yarn nuxt

ここまででTypeScriptのセットアップ完了。

次に、.vueファイルの中でTypeScriptを使うため、pages/index.vue のscriptタグに lang="ts"を追加。


pages/index.vue

<script lang="ts">


pages/index.vue の中で以下のようなコードを書くと、型チェックエラーが発生します

const add = (a:number, b:number) => a + b;

add("a", "b");