なかなかリリースされない Nuxt 3 ですが、さすがにそろそろリリースされるかという状況になってきました。そこで重い腰を上げてようやく実際に使い始めてみたのですが、思わぬ問題にぶつかってしまいました。

なんと、Web アプリケーションのエンジンとして express.js が使えないのです。

Nuxt2 では ServerMiddleware で express を使うよう設定できましたが、Nuxt 3 では h3 という新たに開発されたエンジンに置き換えられ、express は使うことができません。この h3 は TypeScript との親和性が高く、パフォーマンスも良く、良いものではあるとは思うのですが、過去との互換性が気になります。

h3 が言う「Compatible」とは何か

h3 では、「Compatible」が重視されており「node/connect/expressのミドルウェア」と互換性がある旨がうたわれています。なるほど、では問題ないのか、と思うとこれがそう簡単ではないのです。

h3 がサポートしている互換性のための形式は次の２つです。

function (req: IncomingMessage, res: ServerResponse, next: (err?: any) => any)
function (req: IncomingMessage, res: ServerResponse)

前者はミドルウェアで後者は View や JSON を返すところでよく使われる形式です。形式だけだと一見何の問題もなさそうに見えます。何が問題なのでしょうか。それは引数の型です。

express のミドルウェアやハンドラは、node 標準の http ライブラリに含まれる IncomingMessage と ServerResponse そのものではなく、独自拡張した Request 型と Response 型を使っています。ミドルウェアが node:http だけに依存してれば問題ないのですが、express で拡張された機能を使っている場合には対応できません。

解決策：h3-express というライブラリを作った

無ければ作ればよい、ということで h3-express というライブラリを新たに作りました。

機能的には h3 が渡してくる req と res オブジェクトを拡張して express が追加した機能を付加する部分がメインです。defineExpressHandler という関数をはさんで req と res を express の Request と Response 型に変換しています。

import { defineExpressHandler } from 'h3-express'

export default defineExpressHandler((req, res) => {
  req.json({
    req.path,
    req.query,
    req.body,
    req.params,
    req.cookies,
  })
})

また、req.query、req.body、req.params、req.cookies の各種パラメータフィールドについては、express では express.urlencoded() などのミドルウェアを設定する必要がありましたが、h3 の標準機能と２重で処理され競合する可能性があることからそれらのミドルウェアを使わず、h3 の標準機能を使ってフィールドを埋める対応を行っています（例えば req.query は getQuery 関数を使って埋めています）。

合わせてミドルウェアが使用している内部メソッド（res._implicitHeader）も独自に拡張し相互運用性を改善しました。

同じ問題に困っている人がいたら使ってみてもらえると幸いです。