【備忘録】Nuxtのaliasに注意する

この記事について

NuxtでTypeScriptを使っているときに、importが上手くいかなくて困ったので、メモを残しておくことにする。

NuxtのaliasはTypeScriptには効かない

Nuxtにはデフォルトで~や@などのaliasが設定されている。

しかし、このaliasは、JavaScriptやCSSでは機能するが、TypeScriptでは機能しない。
よって、以下のようなパスの指定はエラーになる。

index.vue

<template>
...
</template>

<script lang="ts"> // 言語にTypeScriptを指定
import { TestComponent } from '@/components/TestComponent.vue'; // エラー
...
</script>

tsconfig.jsonのpathsに自分でaliasを定義すれば、上記のようなパスの指定が可能になる。
公式にも以下の注意書きがあったが、見落としていた。

TypeScript を使っていて、自分で定義したエイリアスを TypeScript ファイル内で使用したい場合は、tsconfig.json 内の paths オブジェクトにエイリアスを追加する必要があります。

serverMiddlewareでは相対パスしか使えない

serverMiddlewareを使用するために、以下のように設定したとする。

nuxt.config.ts

export default {
  serverMiddleware: ['../server']
}

上記のように設定した場合、serverディレクトリ配下でのパス指定はすべて相対パスで行われる必要がある。
tsconfig.jsonでpathsが設定されていれば、エディタ上ではエラーにならないが、起動すると以下のようなエラーが表示される。

ServerMiddleware Error: Cannot find module '@/server/utils'

これについて、同様の質問がIssuesに上がっていたので確認してみたところ、以下のようなコメントを見つけた。

@ is a Webpack alias for the project root. Server middleware are loaded by Node, you must use relative paths.

Nuxt3系で解決されるという話もあるみたいだが、現状では相対パスを使うしかなさそう。