くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > TypeScript ServerのエラーでNuxtが起動できなくなった(verbatimModuleSyntax)

TypeScript ServerのエラーでNuxtが起動できなくなった(verbatimModuleSyntax)

Nuxt.js Nuxt3

ある日突然、なにもしてないのに壊れた。。 pnpm devで起動してみると、こんなエラーが。。

$ pnpm dev
ERROR  EISDIR: illegal operation on a directory, read <directory_path>
ERROR  Internal server error: EISDIR: illegal operation on a directory, read <directory_path>

バージョンを変更したり、パッケージの依存関係を見直しても解消せず。。
いろいろ調べてみたときの備忘録(*´ω｀*)

Nuxt3.8以降ではTypeScript5.0のverbatimModuleSyntaxが有効になる

Nuxt3.8の変更点として、tsconfig.jsonのverbatimModuleSyntaxが有効になるようになった。

これにより、importするのが型であることを明示する必要がある。

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

この設定の影響により、トランスパイルが失敗し、エラーになっていたよう。。

やったこと

とりあえずは、verbatimModuleSyntaxをfalseにすることで解消した。

tsconfig.jsonに追加するか、

  // tsconfig.json
  {
    // https://nuxt.com/docs/guide/concepts/typescript
    "extends": "./.nuxt/tsconfig.json",
+   "compilerOptions": {
+     "verbatimModuleSyntax": false
+   }
  }

nuxt.config.ts側に上書きする設定を追加すればOK

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

あとは、適宜修正しつつ、"verbatimModuleSyntax": trueにしていく感じ。

おまけ

verbatimModuleSyntaxについての挙動などは、この記事に詳しく書かれている。

以上!! 全然理由が分からず、かなりハマった。。(´・ω・｀)

参考にしたサイトさま