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

nuxt

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に関係したものが多いような気がしますが、特に理由がなければもう少し待ったほうがよいかもしれませんね。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.