vue.jsの本番環境で”TypeError: Converting circular structure to JSON”が出る

はじめに

vueの開発環境では出なかったのに、buildした本番環境のフロントエンドで”TypeError: Converting circular structure to JSON”が出ました。
バックエンドにPOSTするデータの中にJSONがあるようなケースでした。

const response = await axios.post('/api/inputdatas', {
    inputdata:{
        revision: sendData.datainfo.revision,
        //この部分でエラーになっている
        headerinfo: JSON.stringify(sendData.headerinfo),
    }
}

原因

このエラーは、オブジェクトに 循環参照 (Circular Reference) が含まれているため、JSON.stringify() で変換できないことが原因です。

解決方法

Vueのref()リアクティブ変数には、リアクティブシステム (Proxy) が組み込まれているため、そのまま JSON.stringify()するとエラーになります。これを防ぐには Vue の toRaw() を使ってリアクティブを解除します。

JSON.stringifyの前にtoRawでリアクティブを解除

const response = await axios.post('/api/inputdatas', {
    inputdata:{
        revision: sendData.datainfo.revision,
        //　　　　　　　　　　　　　　　↓この部分
        headerinfo: JSON.stringify(toRaw(sendData.headerinfo)),
    }
}

解決

この後、再度buildし、フロントエンドでエラーが出なくなりました。