Zenn
😀

Nuxt2(nuxt-edge)でTypeScriptとMarkdownのエラーに対応する方法

2018/06/08に公開
Nuxt
tech

Nuxt2（nuxt-edge）に移行してビルド時間が改善されてとても快適になりました。

ですが移行するとTypeScriptとMarkdownのコンパイルがエラーになってしまい、結構ハマりました。

Githubの方でissueやPull Requestが出ていたので、直に修正されるかと思いますがエラーに対応した方法を記載します。

Nuxt2(nuxt-edge)でTypeScriptとMarkdownがコンパイルエラー

移行したプロジェクトはTypeScriptとMarkdownを使っており、下記のmoduleで対応していました。

Nuxt.jsのバージョンは1.3で正常に動いていました。

Nuxt2（nuxt-edge）にしてコンパイルするとエラーになってしまいましたが、結論から言うとTypeScriptもMarkdownも同じことが原因でエラーになっていました。

webpackのloaderが未定義のためエラー

Nuxtでwebpackのローダーを設定する部分で下記のような記述があります。

rule.options.loaders

Nuxt2(nuxt-edge)にするとoptionsオブジェクトのloadersがundefinedになってしまいます。

TypeScript

TypeScriptのコンパイルだと下記の記述でloadersがオブジェクトでないため、tsを代入しようとした時にエラーになります。

rule.options.loaders.ts = tsLoader

この問題についてはPull Requestが出ており修正されるのも時間の問題かなと思います。

https://github.com/nuxt-community/typescript-template/pull/47/files

Pull Requestで出ているコードをmodules/typescript.jsと置き換えることで、Nuxt2(nuxt-edge)でも正常にコンパイルされるようになります。

ここで注意するのはts-loaderのバージョンが4系でないと、エラーになってしまうので3系を使っている場合は最新版をインストールする必要があります。

Markdown

Nuxtでmarkdownを使うには標準で使うことができる@nuxtjs/markdownitを使うのが手っ取り早い方法です。

下記のコードで使うことができるようになりますが、Nuxt2(nuxt-edge)だとエラーになります。

modules: [
  '@nuxtjs/markdownit'
]

原因はTypeScriptの時と同様で

rule.options.loaders

がundefineのためです。

@nuxtjs/markdownitのコード内でもやはりloadersに代入する処理が記述されています。

そこでnode_modules/@nuxtjs/markdownit/index.jsをまるっとコピーして、修正後modulesディレクトリにmarkdown.jsとしてnuxt.config.jsから読み込むようにしました。

修正点は下記です。

// 修正前
vueLoader.options.loaders['md'] = markDownItLoader

// 修正後
vueLoader.options.loaders = vueLoader.options.loaders || {}
vueLoader.options.loaders['md'] = markDownItLoader

loadersが未定義の場合にオブジェクトを生やすことで、エラーが出ずにコンパイルされるようになりました。

理由がなければloaderが対応するまで待ったほうが良いかも？

僕はビルド速度の改善に期待してアップグレードしました。

期待どおりに改善されたので、アップグレードして良かったと思っています。

エラーが出るとすると今回のloadersがundefinedに関係したものが多いような気がしますが、特に理由がなければもう少し待ったほうがよいかもしれませんね。

Discussion