Trying to pull body in POST mocks breaks mocking

[reintroducing]

Prerequisites

• [X] I confirm my issue is not in the opened issues
• [X] I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• [X] I'm using the latest msw version
• [X] I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://github.com/reintroducing/vite-msw

Reproduction steps

• npm i
• npm start
• Click "Post Test" button and observe output text and console. Everything works as expected.
• Open src/mocks/api/tour/post-test/index.ts and comment out lines 13-15 and uncomment lines 16-22.
• Click "Post Test" button again. Notice that the output text doesn't show up and there is an error in the console.

Current behavior

When using async/await handler for post request and trying to get the body using const body = await request.formData();, the request fails. Note that the method can be async but just trying to get the body using await is what is causing the issue.

Expected behavior

Should be able to retrieve the body and log out foo as the docs outline and the mock should function as expected.

[haakonph]

I have the same issue. Using node v20.13.1 it works with node V20.0.0

[reintroducing]

@kettanaito just wanted to follow up on this and see if there is anything else that would be helpful in getting to the bottom of it. This seems like a rather large issue considering the documented behavior seems to be broken, i'm surprised there are not more reports of this.

I have not tested different node versions but for what its worth i'm on v20.11.1.

[kjindal0802]

@kettanaito I am also facing the same issue, when I am trying to pull request body or formData by using async await, it breaks the handlers without any error.

http.post(
  `https://mydomain/upload`,
  async ({ request }) => {
  const info = await request.formData();
  console.log('info--------------', info);
  return HttpResponse.json(bulkUploadErrorResponse.FAILED);
  }
)

test('success message should appear on screen when a correct bulk file is uploaded', async () => {
  render(<MyComponent />);

  const file = generateXLSXFile('Sample Content', 'testFile'); // custom method to generate excel file
  const fileInput = screen.getByTestId('file-upload');

  // eslint-disable-next-line
  await act(async () => {
  console.log('Uploading file ......');
  await userEvent.upload(fileInput, file);
  });

  // eslint-disable-next-line
  expect(
  await screen.findByText(
  'Bulk Upload for the inventory has been successfully uploaded!'
  )
  );
});