Plugin Serverless-Http giving an error when sls offline is called

i have installed serverless-http plugin through node-module and installed through the command of sls serverless plugin install -n serverless-http

Output for the above command:

✔ Plugin "serverless-http" installed  (13s)

When further gave the command sls offline results in a error of Error: Unsupported framework.

Terminal output for the above:

Initializing provider configuration...
Environment: linux, node 14.20.1, framework 3.23.0, plugin 6.2.2, SDK 4.3.2
Docs:        docs.serverless.com
Support:     forum.serverless.com
Bugs:        github.com/serverless/serverless/issues

Error:
Error: Unsupported framework
    at getFramework (/workspaces/serverless/node_modules/serverless-http/lib/framework/get-framework.js:78:9)
    at new module.exports (/workspaces/serverless/node_modules/serverless-http/serverless-http.js:14:21)
    at PluginManager.addPlugin (/usr/local/lib/node_modules/serverless/lib/classes/plugin-manager.js:91:28)
    at /usr/local/lib/node_modules/serverless/lib/classes/plugin-manager.js:137:69
    at Array.forEach (<anonymous>)
    at PluginManager.loadAllPlugins (/usr/local/lib/node_modules/serverless/lib/classes/plugin-manager.js:137:44)
    at async Serverless.init (/usr/local/lib/node_modules/serverless/lib/serverless.js:141:5)
    at async /usr/local/lib/node_modules/serverless/scripts/serverless.js:591:7

serverless.yml

service: serverless
provider:
  name: azure
  region: West US 2
  runtime: nodejs14
  environment:
    VARIABLE_FOO: foo
plugins:
  - serverless-azure-functions
  - serverless-http
package:
  patterns:
    - "!local.settings.json"
    - "!.vscode/**"
functions:
  api:
    handler: src/handlers/hello.handlertest
    events:
      - http: true
        name: res
        method: ANY
        route: "{*segments}"
        authLevel: anonymous
      - http: true
        x-azure-settings:
          direction: out
          name: $return

handler hello.js

"use strict"

const serverless = require("serverless-http")
const express = require("express")

const app = express()
const router = express.Router()
module.exports = app

app.set("port", process.env.PORT || 3000)
app.listen(app.get("port"), () => {
  console.log(`listening on port ${app.get("port")}`)
})

router.get("/api/serverless", (req, res) => {
  res.json("Hi")
})

app.use("/", router)

// Export your express server so you can import it in the azure function.

const handler = serverless(app, { provider: "azure" })
module.exports.handlertest = async (context, req) => {
  context.res = await handler(context, req)
}
// app.use(/* register your middleware as normal */)

package.json:

{
  "name": "serverless",
  "version": "1.0.0",
  "description": "Azure Functions sample for the Serverless framework",
  "scripts": {
    "test": "echo \"No tests yet...\"",
    "start": "func host start"
  },
  "keywords": [
    "azure",
    "serverless"
  ],
  "dependencies": {
    "express": "^4.18.2",
    "unzipper": "^0.10.7"
  },
  "devDependencies": {
    "@azure/functions": "^3.2.0",
    "serverless-azure-functions": "^2.0.0",
    "serverless-http": "^3.1.0"
  }
}

If possible please add a example for serverless-http express with the serverless implementation i have been struggling a lot with it, Thank you

dougmoscrop / serverless-http

Plugin Serverless-Http giving an error when sls offline is called #253