概要

ハマったのでメモです。

自社サイトのNoSchoolにTypeScriptを導入したのですが、npm run build時に失敗してしまって、結果TypeScriptのバージョンを巻き戻したら治りました。

環境

Nuxt v2.10.2
@nuxt/typescript-build v0.3.2
TypeScript 3.7.2

補足

TypeScript3.7を入れていたのは、最近Optional Chainingが出て話題だったのでNuxtで使えないかなと思って入れたのがきっかけだったのですが、その後、VSCodeでvetur.useWorkspaceDependenciesをTrueにして利用することにしたので入れていました。

なので、あくまで開発環境でVeturを動かすことを目的として、devDependenciesのほうにTypeScriptを入れていました。

package.json

  "devDependencies": {
    ...,
    "typescript": "^3.7.2",
    ...
  }

起こったこと

npm run devは通っていたのですが、npm run build時に下記ログで失敗しました。

ERROR in /opt/noschool/client/node_modules/@nuxt/types/config/build.d.ts(18,10):
18:10 Import declaration conflicts with local declaration of 'FileLoaderOptions'.
    16 | import { Options as OptimizeCssAssetsWebpackPluginOptions } from 'optimize-css-assets-webpack-plugin'
    17 | import { TerserPluginOptions } from 'terser-webpack-plugin'
  > 18 | import { Options as FileLoaderOptions } from 'file-loader'
       |          ^
    19 | import { Options as PugOptions } from 'pug'
    20 | import * as Less from 'less'
    21 | import { Options as SassOptions } from 'node-sass'

原因の探し方

まずはImport declaration conflictsでググってみると、下記issueが見つかりました。

結局ここにTypeScriptのバージョンを下げたら治ったといったことが書いてあるので、自分の手元でもTypeScriptを3.6.4に戻してみたらbuildが通りました。

package.json

  "devDependencies": {
    ...,
    "typescript": "^3.6.4",
    ...
  }

結果として3.6.4に戻した格好になります。

そもそも

@nuxt/typescript-buildがTypeScript3.6を対象にしているので、合わせるのが無難でしたね。
https://github.com/nuxt/typescript/blob/master/packages/typescript-build/package.json

下記の記事でNuxtではTypeScript3.7は使えないと書いてありますが、使えないとは具体的にどういう意味だったのかはわからなかったので、今回buildが失敗して実感しました。
https://qiita.com/simochee/items/a2eca2ea8761409889be

わからないこと

とはいえ3.7以降だとなぜダメで、3.6に戻すと治ったのかはよくわからず。僕自身としては3.6から3.7になってOptional Chaining以外に何が変わったのかよく知らないので、調べてみてわかったら追記します。

とりあえず上記のエラーメッセージでググったときに記事がほとんどなかったので、QiitaのSEOにあやかって同じミスでハマってしまった方がすぐに解決できたら嬉しいです。

Nuxt2.10.2と@nuxt/typescript-build環境でtypescript3.7以降を入れているとbuild失敗する

概要

環境

補足

起こったこと

原因の探し方

そもそも

わからないこと