(FormData) TypeError: source.on is not a function

[kumboleijo]

What is the problem?

I'm using openapi-typescript-codegen for creating an axios client. When I try to call one of the services I end up getting the following error:

.../_nestjs/node_modules/delayed-stream/lib/delayed_stream.js:33
  source.on('error', function() {});
         ^
TypeError: source.on is not a function
    at Function.DelayedStream.create (.../_nestjs/node_modules/delayed-stream/lib/delayed_stream.js:33:10)
    at FormData.CombinedStream.append (.../_nestjs/node_modules/combined-stream/lib/combined_stream.js:45:37)
    at FormData.append (.../_nestjs/node_modules/form-data/lib/form_data.js:75:3)
    at process (.../_nestjs/client/app/src/generated/core/request.ts:117:26)
    at .../_nestjs/client/app/src/generated/core/request.ts:127:40
    at Array.forEach (<anonymous>)
    at .../_nestjs/client/app/src/generated/core/request.ts:127:27
    at Array.forEach (<anonymous>)
    at getFormData (.../_nestjs/client/app/src/generated/core/request.ts:125:14)
    at .../_nestjs/client/app/src/generated/core/request.ts:294:41

Like the stacktrace shows the error is thrown inside request.ts file in the getFormData function.

export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
    if (options.formData) {
        const formData = new FormData();

        const process = (key: string, value: any) => {
            if (isString(value) || isBlob(value)) {
                formData.append(key, value); // 🚨 this is where it breaks (isBlob == true)
            } else {
                formData.append(key, JSON.stringify(value));
            }
        };

        Object.entries(options.formData)
            .filter(([_, value]) => isDefined(value))
            .forEach(([key, value]) => {
                if (Array.isArray(value)) {
                    value.forEach(v => process(key, v));
                } else {
                    process(key, value);
                }
            });

        return formData;
    }
    return undefined;
};

Reproducable example

❯ node -v
v20.10.0

package.json

{
  "name": "api",
  "version": "0.0.1",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "prebuild": "rm -rf dist",
    "gen": "openapi -i openapi.json -o src/generated -c axios --useOptions --useUnionTypes",
    "build": "tsc"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "form-data": "^4.0.0"
  },
  "devDependencies": {
    "@types/node": "^20.10.4",
    "openapi-typescript-codegen": "0.25.0",
    "ts-node": "^10.9.2",
    "tsc": "2.0.4",
    "typescript": "^5.3.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "declaration": true,
    "removeComments": false,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "incremental": false,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "noFallthroughCasesInSwitch": false,
    "lib": ["ES2022", "dom"],
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": false,
    "skipLibCheck": true,
    "baseUrl": "./",
    "rootDir": "./",
    "outDir": "dist"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

My openapi spec is looking like this:

{
  "openapi": "3.0.0",
  "paths": {
    "/mail/send": {
      "post": {
        "operationId": "sendMail",
        "summary": "Send a generic mail",
        "parameters": [
          { "name": "subject", "required": true, "in": "query", "schema": { "type": "string" } },
          { "name": "recipients", "required": true, "in": "query", "schema": { "type": "array", "items": { "type": "string" } } },
          { "name": "displayName", "required": true, "in": "query", "schema": { "type": "string" } },
          { "name": "replyTo", "required": true, "in": "query", "schema": { "type": "string" } },
          { "name": "ccs", "required": false, "in": "query", "schema": { "type": "array", "items": { "type": "string" } } },
          { "name": "bccs", "required": false, "in": "query", "schema": { "type": "array", "items": { "type": "string" } } }
        ],
        "requestBody": { "required": true, "content": { "multipart/form-data": { "schema": { "$ref": "#/components/schemas/SendGenericMailBodyDto" } } } },
        "responses": { "201": { "description": "" } },
        "tags": ["Mail"],
        "security": [{ "JWT": [] }]
      }
    }
  },
  "info": { "title": "API" },
  "tags": [],
  "servers": [],
  "components": {
    "schemas": {
      "SendGenericMailBodyDto": { "type": "object", "properties": { "attachments": { "type": "array", "items": { "type": "string", "format": "binary" } } }, "required": ["attachments"] }
    }
  }
}

The generated code for that service looks like this:

...
export class MailService {

    /**
     * Send a generic mail
     * @returns any
     * @throws ApiError
     */
    public static sendMail({
        subject,
        recipients,
        displayName,
        replyTo,
        formData,
        ccs,
        bccs,
    }: {
        subject: string,
        recipients: Array<string>,
        displayName: string,
        replyTo: string,
        formData: SendGenericMailBodyDto,
        ccs?: Array<string>,
        bccs?: Array<string>,
    }): CancelablePromise<any> {
        return __request(OpenAPI, {
            method: 'POST',
            url: '/mail/send',
            query: {
                'subject': subject,
                'recipients': recipients,
                'displayName': displayName,
                'replyTo': replyTo,
                'ccs': ccs,
                'bccs': bccs,
            },
            formData: formData,
            mediaType: 'multipart/form-data',
        });
    }

}

Now when I try to call that service the error occurs:

import * as MAIL from '..';

export async function sendMail() {
  const obj = { hello: 'world' };
  const blob = new Blob([JSON.stringify(obj, null, 2)], {
    type: 'application/json',
  });

  await MAIL.MailService.sendMail({
    displayName: 'Test',
    recipients: ['test@test.com'],
    subject: 'Test',
    replyTo: 'test@test.com',
    formData: {
      attachments: [blob],
    },
  });
}

Am I missing something?

[melanki]

@kumboleijo Did you ever figure out what caused this issue?

[kumboleijo]

@melanki sadly no. But what I can say is, that it is working in browser based environments (React App built with vite). Not sure if I'm doing something wrong in my typescript setup and mess up with ESM and CJS?

[costa-collibra]

I have also had this exact same issue when trying to use the generated code to upload a file. For now I have had to build my own request using axios. I am using the client in my e2e Playwright tests for creating test data.

I can provide more context if and examples if you are looking into this issue.

Thanks

[kumboleijo]

@costa-collibra Would you mind sharing some more insights on this and what exactly you had to tweak in your custom request in order to get it work? 🙏

[costa-collibra]

@kumboleijo My choice of words were probably a bit poor. In order to get it to work we couldnt use the library so we used axios directly.

export const uploadZip = async ({ filePath, fileName }: { filePath: string; fileName: string }): Promise<any> => {
  const data = new FormData();
  const setCustomAuthHeader = btoa(
    `${envConfig().CUSTOM_ADMIN_TEST_USERNAME}:${envConfig().CUSTOM_ADMIN_TEST_PASSWORD}`,
  );

  data.append('file', fs.createReadStream(filePath));
  data.append('fileName', fileName);

  const config = {
    method: 'post',
    maxBodyLength: Infinity,
    url: envConfig().BASE_URL + '/rest/2.0/workflowDefinitions',
    headers: {
      Authorization: `Basic ${setCustomAuthHeader}`,
      ...data.getHeaders(),
    },
    data: data,
  };

  const response = await axios.request(config);
  console.log(`RESPONSE: ${JSON.stringify(response.data)}`);

  return response;
};

This is why I think the issue resides in this library as this code is working.

I really hope this gets fixed though so we can go back to library for this endpoint.

[kumboleijo]

@costa-collibra oh I see... I thought you provided your own custom request file using:

npx openapi-typescript-codegen --input ./spec.json --output ./generated --request ./request.ts

• https://github.com/ferdikoomen/openapi-typescript-codegen/wiki/Custom-request-file

I guess that could be a good workaround for you since you already have custom code written for that call.

[costa-collibra]

@costa-collibra oh I see... I thought you provided your own custom request file using:

npx openapi-typescript-codegen --input ./spec.json --output ./generated --request ./request.ts

• https://github.com/ferdikoomen/openapi-typescript-codegen/wiki/Custom-request-file

I guess that could be a good workaround for you since you already have custom code written for that call.

I didnt even know this was possible, hopefully its only a temp workaround

[mluogh]

I am also experiencing this issue. In another browser based project, I was able to get this working, but I built an Electron app with electon-react-boilerplate and see the issue here.

I also just directly used Axios and made my own FormData() and see no issues with that.

[mrlubos]

@jordanshatford we have this fixed in @hey-api/openapi-ts, right?

[costa-collibra]

@jordanshatford we have this fixed in @hey-api/openapi-ts, right?

Oh really. I will check this out asap.

[mrlubos]

@costa-collibra let me know please, I'm not sure as I never ran into this with my Axios client

[mrlubos]

@costa-collibra if it's not fixed, we have a whole issue around a slew of similar bugs hey-api/openapi-ts#29

[costa-collibra]

Leave it with me and il get back to you