Nuxt3のSPAモードでquerystringが利用できない問題の対処方法

Node.jsにおいてContent-Type:application/x-www-form-urlencodedのリクエストする場合は、body情報は一般的には下記のようにquerystringを利用して処理するのが一般的だと思います。

import qs from 'querystring';

const response = await fetch(url, {
　method: "POST",
　headers: {
　　'Content-Type': 'application/x-www-form-urlencoded'
　},
　body: qs.stringify(requestBody)
});

しかしながら上記のようなソースだとNuxt3のSPAモードではエラーに遭遇します。

エラー内容

message: "Module "querystring" has been externalized for browser compatibility. Cannot access "querystring, stringify' in client code. See http://vitejs.dev/guide/troubleshooting.html#/module-externalized-for-browser-compatibility for more details."

この問題は”querystring” モジュールは、サーバーサイド（Node.js）で使うもので、ブラウザサイドで動かないことが原因です。

解決方法

この問題を解決する方法は、query-stringを利用することによって解決が可能です。

まずは下記のようにquery-stringをプロジェクトにインストールします。

npm install query-string

次にquerystringの仕様で書かれていたソースコードを修正します。

import queryString from 'query-string';

const response = await fetch(url, {
　method: "POST",
　headers: {
　　'Content-Type': 'application/x-www-form-urlencoded'
　},
　body: queryString.stringify(requestBody)
});

これで問題は解決します。

Nuxt3 SPAでContent-Type:application/x-www-form-urlencodedのリクエストを送信する方はこちらを参考にデバッグしてみてください。