【NUXT３】verbatimModuleSyntaxでエラーがでる

2023年10月のNuxt3.8へのアップデートより、型のimportの定義がより厳密になりました。

Vue requires that type imports be explicit (so that the Vue compiler can correctly optimise and resolve type imports for props and so on). See core Vue tsconfig.json.

We’ve therefore taken the decision to turn on verbatimModuleSyntax by default in Nuxt projects, which will throw a type error if types are imported without an explicit type import. To resolve it you will need to update your imports:

https://nuxt.com/blog/v3-8#type-import-changes

Nuxt

Nuxt 3.8 · Nuxt Blog Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app manifest and much more.

本記事を見られている方は、恐らく型エラーが出るようになっていると思います。

'RecipeEntity' is a type and must be imported using a type-only 
import when 'verbatimModuleSyntax' is enabled.

対処方法

方法１：typeをつけるなど型を厳密にする

import { RecipeEntity } from "~~/types/entities";
↓
import { type RecipeEntity } from "~~/types/entities";

方法２：ts.config.jsonのverbatimModuleSyntaxをoffにする

.nuxtディレクトリにあるts.config.jsonにアクセスします。

ここにnuxtにおけるtypescriptのルールが記載されております。

デフォルトではオンになっているのでoffにします。

そうすると従来通りの挙動になりエラーが消えるはずです。

くらげになりたい。

TypeScript ServerのエラーでNuxtが起動できなくなった(verbatimModuleSyntax) – くらげになりたい。 ある日突然、なにもしてないのに壊れた。。 pnpm devで起動してみると、こんなエラーが。。 $ pnpm dev ERROR EISDIR: illegal operation on a directory, read