個人開発するかーと息巻いて、環境を作ろうとしたら早速ハマったのでメモ。
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
念のためブラウザでも確認してみる
Error
Cannot find module './index.vue?vue&type=script&lang=ts&'
当然エラー
Nuxt Typescriptの公式ドキュメントを見る
セットアップ > 設定 の項を見てみると、下記だけ設定されていなかったので、 vue-shim.d.ts を作り、プロジェクト直下に置いてみる。
以下の型宣言を追加し Vue ファイルの型を提供する必要があります：
vue-shim.d.ts:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
もう一度 yarn dev してブラウザで確認してみたが、まだエラーは消えず。。
公式ドキュメントを読み進めていると、package.jsonにも差分があることがわかりました。
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 してみます。
無事表示されました。
まとめ
あとで試しましたが、 vue-shim.d.ts がなくてもビルドは通りました。
問題は @nuxt/typescript-runtime のバージョンだけみたいです。
Nuxt Typescriptの公式ドキュメント見ながら環境作れば動くものの、create nuxt-appに組み込んでいるなら最初から動くようにしておいてほしい。。