Nuxt2(nuxt-edge)でTypeScriptとMarkdownのエラーに対応する方法
Nuxt2(nuxt-edge)に移行してビルド時間が改善されてとても快適になりました。
ですが移行するとTypeScriptとMarkdownのコンパイルがエラーになってしまい、結構ハマりました。
Githubの方でissueやPull Requestが出ていたので、直に修正されるかと思いますがエラーに対応した方法を記載します。
- 目次
Nuxt2(nuxt-edge)でTypeScriptとMarkdownがコンパイルエラー
移行したプロジェクトはTypeScriptとMarkdownを使っており、下記のmoduleで対応していました。
Nuxt.jsのバージョンは1.3で正常に動いていました。
- TypeScript:[nuxt-community/typescript-template: Typescript starter with Nuxt.js](https://github.com/nuxt-community/typescript-template)
- Markdown:[modules/packages/markdownit at master · nuxt-community/modules](https://github.com/nuxt-community/modules/tree/master/packages/markdownit)
Nuxt2(nuxt-edge)にしてコンパイルするとエラーになってしまいましたが、結論から言うとTypeScriptもMarkdownも同じことが原因でエラーになっていました。
webpackのloaderが未定義のためエラー
Nuxtでwebpackのローダーを設定する部分で下記のような記述があります。
1
rule.options.loaders
Nuxt2(nuxt-edge)にするとoptionsオブジェクトのloadersがundefinedになってしまいます。
TypeScript
TypeScriptのコンパイルだと下記の記述でloadersがオブジェクトでないため、tsを代入しようとした時にエラーになります。
1
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)だとエラーになります。
1 2 3
modules: [ '@nuxtjs/markdownit' ]
原因はTypeScriptの時と同様で
1
rule.options.loaders
がundefineのためです。
@nuxtjs/markdownitのコード内でもやはりloadersに代入する処理が記述されています。
そこでnode_modules/@nuxtjs/markdownit/index.jsをまるっとコピーして、修正後modulesディレクトリにmarkdown.jsとしてnuxt.config.jsから読み込むようにしました。
修正点は下記です。
1 2 3 4 5 6
// 修正前 vueLoader.options.loaders['md'] = markDownItLoader // 修正後 vueLoader.options.loaders = vueLoader.options.loaders || {} vueLoader.options.loaders['md'] = markDownItLoader
loadersが未定義の場合にオブジェクトを生やすことで、エラーが出ずにコンパイルされるようになりました。
理由がなければloaderが対応するまで待ったほうが良いかも?
僕はビルド速度の改善に期待してアップグレードしました。
期待どおりに改善されたので、アップグレードして良かったと思っています。
エラーが出るとすると今回のloadersがundefinedに関係したものが多いような気がしますが、特に理由がなければもう少し待ったほうがよいかもしれませんね。