Webpack compilation failed: node_modules/@middy/core/index.cjs 24:26

Question

I can't deploy my code to lambda when I use middy; it will always return the error

Error:
Webpack compilation failed:

in D:/web/earthlings/node_modules/@middy/http-json-body-parser/index.cjs 18:59
  Module parse failed: Unexpected token (18:59)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |     const httpJsonBodyParserMiddlewareBefore = async (request)=>{
  |         const { headers , body  } = request.event;
  >         const contentTypeHeader = headers['Content-Type'] ?? headers['content-type'];
  |         if (mimePattern.test(contentTypeHeader)) {
  |             try {

  in D:/web/earthlings/node_modules/@middy/core/index.cjs 24:26
  Module parse failed: Unexpected token (24:26)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |     };
  |     plugin.timeoutEarly = plugin.timeoutEarlyInMillis > 0;
  >     plugin.beforePrefetch?.();
  |     const beforeMiddlewares = [];
  |     const afterMiddlewares = [];

Below is my code which I tried to deploy

const stripe = require('stripe')('sk_test_1111');
const endpointSecret = "whsec_1111";

const middy = require('@middy/core')
const httpJsonBodyParser = require('@middy/http-json-body-parser')

const lambdaHandler = async (req, res) => {
  const sig = req.headers['stripe-signature'];
  let event;  

  try {
    event = stripe.webhooks.constructEvent(req.rawBody, sig, endpointSecret);
  } catch (err) {
    res.status(400).send(`Webhook Error: ${err.message}`);
    return;
  }

  // Handle the event
  switch (event.type) {
    case 'payment_intent.succeeded':
      const paymentIntent = event.data.object;
      // Then define and call a function to handle the event payment_intent.succeeded
      break;
    // ... handle other event types
    default:
      console.log(`Unhandled event type ${event.type}`);
  }
  res.status(200).send({ success:true })
};

const handler = middy()
  .use(httpJsonBodyParser())
  .handler(lambdaHandler)

module.exports = handler

Is there anywhere in the serverless.yml file maybe, that I need to specify that I'm using middy with webpack?