From 66b587b815f64a6a51a880381df321ef48b25e9d Mon Sep 17 00:00:00 2001
From: Vaibhav Raj Singh <vaibhav.rajsingh@konghq.com>
Date: Wed, 16 Oct 2024 14:11:36 +0530
Subject: [PATCH] fix(form-data): fix ssr error due to window object access
 (#373)

* fix(form-data): override import from package root

* fix(httpsnippet): linting errors
---
 src/httpsnippet.ts       | 16 +++++++++-------
 src/types/form-data.d.ts |  4 ++++
 2 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 src/types/form-data.d.ts

diff --git a/src/httpsnippet.ts b/src/httpsnippet.ts
index 0722c884..c46157b3 100644
--- a/src/httpsnippet.ts
+++ b/src/httpsnippet.ts
@@ -1,5 +1,5 @@
 import { map as eventStreamMap } from 'event-stream';
-import FormData from 'form-data';
+import FormData from 'form-data/lib/form_data';
 import { Param, PostDataCommon, Request as NpmHarRequest } from 'har-format';
 import { validateRequest } from 'har-validator-compiled';
 import { stringify as queryStringify } from 'querystring';
@@ -13,6 +13,13 @@ import { ClientId, TargetId, targets } from './targets/targets';
 export { availableTargets, extname } from './helpers/utils';
 export { addTarget, addTargetClient } from './targets/targets';
 
+// We're implementing the logic for which FormData object to use, ourselves.
+// This allows us to use the native FormData object in the browser and the `form-data` module in Node,
+// instead of relying on the package entrypoint to handle that.
+const resolveFormData =
+  // @ts-expect-error — we're only using window.FormData if it exists
+  typeof window !== 'undefined' && window.FormData ? window.FormData : FormData;
+
 const DEBUG_MODE = false;
 
 const debug = {
@@ -174,7 +181,7 @@ export class HTTPSnippet {
         request.postData.mimeType = 'multipart/form-data';
 
         if (request.postData?.params) {
-          const form = new FormData();
+          const form = new resolveFormData();
 
           // The `form-data` module returns one of two things: a native FormData object, or its own polyfill
           // Since the polyfill does not support the full API of the native FormData object, when this library is running in a browser environment it'll fail on two things:
@@ -186,7 +193,6 @@ export class HTTPSnippet {
           // Since the native FormData object is iterable, we easily detect what version of `form-data` we're working with here to allow `multipart/form-data` requests to be compiled under both browser and Node environments.
           //
           // This hack is pretty awful but it's the only way we can use this library in the browser as if we code this against just the native FormData object, we can't polyfill that back into Node because Blob and File objects, which something like `formdata-polyfill` requires, don't exist there.
-          // @ts-expect-error TODO
           const isNativeFormData = typeof form[Symbol.iterator] === 'function';
 
           // TODO: THIS ABSOLUTELY MUST BE REMOVED.
@@ -194,7 +200,6 @@ export class HTTPSnippet {
           // easter egg
           const boundary = '---011000010111000001101001'; // this is binary for "api". yep.
           if (!isNativeFormData) {
-            // @ts-expect-error THIS IS WRONG.  VERY WRONG.
             form._boundary = boundary;
           }
 
@@ -205,16 +210,13 @@ export class HTTPSnippet {
 
             if (isNativeFormData) {
               if (isBlob(value)) {
-                // @ts-expect-error TODO
                 form.append(name, value, filename);
               } else {
                 form.append(name, value);
               }
             } else {
               form.append(name, value, {
-                // @ts-expect-error TODO
                 filename,
-                // @ts-expect-error TODO
                 contentType: param.contentType || null,
               });
             }
diff --git a/src/types/form-data.d.ts b/src/types/form-data.d.ts
new file mode 100644
index 00000000..0f43ed74
--- /dev/null
+++ b/src/types/form-data.d.ts
@@ -0,0 +1,4 @@
+declare module 'form-data/lib/form_data' {
+  import FormData from 'form-data';
+  export default FormData;
+}