KJ DEV
How to

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

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

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

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

目次
  1. Nuxt2(nuxt-edge)でTypeScriptとMarkdownがコンパイルエラー
  2. webpackのloaderが未定義のためエラー
    1. TypeScript
    2. Markdown
  3. 理由がなければloaderが対応するまで待ったほうが良いかも?

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

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。