sls invoke local won't work

[jrean]

Hey, I'm trying to understand the following behaviour. Here are the steps to reproduce:

// node v14.21.3
// npm 6.14.18

npm install serverless-webpack --save-dev

I update the package.json to include serverless version 3. Here is the default package.json:

{
  "name": "serverless-3",
  "version": "1.0.0",
  "description": "Serverless google-nodejs-typescript template",
  "main": "serverless.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy": "sls deploy",
    "compile": "tsc"
  },
  "engines": {
    "node": ">=14.15.0"
  },
  "devDependencies": {
    "@serverless/typescript": "^3.30.1",
    "@types/express": "^4.17.11",
    "@types/node": "^20.2.5",
    "express": "^4.18.2",
    "serverless": "^3.31.0",
    "serverless-google-cloudfunctions": "^4.6.0",
    "serverless-webpack": "^5.11.0",
    "ts-loader": "^9.4.3",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.2.0",
    "tsconfig-paths-webpack-plugin": "^4.0.1",
    "typescript": "^5.0.4",
    "webpack": "^5.84.1",
    "webpack-node-externals": "^3.0.0"
  },
  "author": "Corentin Doué",
  "license": "MIT"
}

I run the typescript compiler, no warnings / errors. All good. I run the default httpHello function locally with the following command: sls invoke local --function httpHello -p src/tests/mocks/postHelloWorld.json --verbose.
The content of postHelloWorld.json is as follow:

{
  "method": "POST",
  "headers": {
    "content-type": "application/json"
  },
  "body": {
    "message": "Hello World"
  }
}

All good it's very fast:

Running "serverless" from node_modules
Using configuration:
{
  "webpackConfig": "./webpack.config.js",
  "includeModules": true,
  "packager": "npm",
  "packagerOptions": {},
  "keepOutputDirectory": false,
  "concurrency": 4
}
Removing xxx/serverless-3/.webpack
[Webpack] Building with Webpack
...
 2023-05-28 16:33:27: webpack 5.84.1 compiled successfully in 306 ms (9c707081b43153503a0e)

{"severity":"INFO","message":"Hello World"}
{
    "status": 200,
    "headers": {}
}

Now, I update the default http-hello/handler.ts as follow, to have some validation layer:

import type { Request, Response } from './types';
import { body } from 'express-validator';
import { handleWithValidation } from '@libs/http-handler';
import { logger } from '@libs/logs';

export const httpHello = handleWithValidation(
  body('message').isString(),
  async (req: Request, res: Response) => {

    const {
      body: { message },
    } = req

    logger.info({ message })

    res.status(200).send()
  }
)

And the libs/http-handler.ts as follow:

import type { Request , Response, RequestHandler } from 'express';
import { validationResult as defaultValidationResult } from 'express-validator';
import express from 'express';
import { logger } from "@libs/logs";

export const handle = (...handlers: RequestHandler[]): RequestHandler => {
  const httpHandler = express()
  httpHandler.use(express.json())
  httpHandler.use(async (req: Request, res: Response, next): Promise<void> => {
    logger.init(req);

    try {
      next()
    } catch (error) {
      logger.error(error);
      res.status(500).send();
    }
  })

  httpHandler.use(handlers);

  return httpHandler;
};

export const validationResult = defaultValidationResult.withDefaults({
  formatter: error => {
    delete error.msg;
    return error;
  }
})

export const handleValidation: RequestHandler = (req, res, next) => {
  const errors = validationResult(req);

  if (!errors.isEmpty()) {
    return res.status(422).json({
      errors: errors.mapped()
    })
  }

  next()
}

export const handleWithValidation = (...handlers: RequestHandler[]): RequestHandler => {
  handlers.splice(handlers.length - 1, 0, handleValidation);

  return handle(...handlers);
}

Nothing crazy! I install the express-validator package. I run the typescript compiler, no warnings / errors.
I do not change anything from the previous tests.

I run the exact same command: sls invoke local --function httpHello -p src/tests/mocks/postHelloWorld.json --verbose.
But this time webpack stay stuck forever:

...
2023-05-28 16:41:41: webpack 5.84.1 compiled successfully in 329 ms (8958ac2868ea56396deb)
⠏ [Webpack] Building with Webpack ...

And the output of the function never happens.
What am I missing please?

[OoDeLally]

I have a similar problem, but my logs are successfully output ; it's just that ⠏ [Webpack] Building with Webpack ... is overwriting the last logs in the console constantly.
If you're in my situation, and you add multiple logs after your request is precessed, you may see that your logs appear quickly as a glitch, but then instantly covered with ⠏ [Webpack] Building with Webpack ....
I think this is a bug, where serverless-offline do not "realize" that webpack has done its job and the app is effectively running..
I've posted an issue #2172