Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@ryo511

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

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

不具合の概要

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

Screen Shot 2019-07-11 at 0.51.53.png

※手元の環境は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のエラーが消え、モジュールの解決が動作するようになります。

Screen Shot 2019-07-11 at 2.25.41.png

修正後のプロジェクトは以下のリポジトリに置いてます。
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でも問題ないです)。

Screen Shot 2019-07-11 at 0.45.42.png

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 の中で以下のようなコードを書くと、型チェックエラーが発生します :thumbsup:

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

Screen Shot 2019-07-11 at 2.09.42.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
29
Help us understand the problem. What are the problem?