Typescript + Express : Type 'typeof e' has no compatible call signatures

Question

I'm trying to build an application using typescript , express . but i'm getting this error : Cannot invoke an expression whose type lacks a call signature. Type 'typeof e' has no compatible call signatures(in app.ts where express() is called )

I'm using webpack here to help with my development.

My Package.json :

"scripts" :{
    "build": "webpack" 
 },
 "dependencies": {
    "body-parser": "^1.18.3",
    "dotenv": "^6.1.0",
    "jsonwebtoken": "^8.3.0",
    "nodemon": "^1.18.5"
  },
  "devDependencies": {
    "@types/body-parser": "^1.17.0",
    "@types/dotenv": "^4.0.3",
    "@types/express": "^4.16.0",
    "clean-webpack-plugin": "^0.1.19",
    "ts-loader": "^5.3.0",
    "ts-node": "^7.0.1",
    "typescript": "^3.1.6",
    "webpack": "^4.24.0",
    "webpack-cli": "^3.1.2"
  }

my webpack.confg.js :

var path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");

var fs = require("fs");
var nodeModules = {};
fs.readdirSync("node_modules")
  .filter(function(x) {
    return [".bin"].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = "commonjs " + mod;
  });

module.exports = {
  entry: "./src/index.ts",

  plugins: [new CleanWebpackPlugin(["./dist"])],
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      //all files with .ts extention will be handled y ts-loader
      { test: /\.ts$/, loader: "ts-loader" }
    ]
  },
  target: "node",
  externals: nodeModules
};

my app.ts :

import * as express from "express";
import * as bodyParser from "body-parser";

class App {
  public app: express.Application;
  constructor() {
    this.app = express();
    this.config();
  }

  private config(): void {
    //add support for application/json type for data
    this.app.use(bodyParser.json());

    //support application/x-www-form-urlencoded post data
    this.app.use(bodyParser.urlencoded({ extended: false }));
  }
}

export default new App().app;

I'm running npm run build and my build fails with the error stated . tried searching for solution in a few blogs and none have mentioned tanything about this error .I manged to add express.Application as type for app in side app.ts What am i doing wrong ? Is it because of the configuration of webpack ?

Any help appreciated

Solution

You need to import the default export from express instead of the namespace (which is an object with all named exports).

In your app.ts this should be all you need:

// Change these
import express from "express";
import bodyParser from "body-parser";

The difference is:

// Namespace import
import * as express from "express";

const app = express.default();

// Default import
import express from "express";

const app = express();

Comments

[pzaenger]

Is express missing in your dependencies?

[CruelEngine]

@pzaenger yes i think i missed it . but its still the same :( . error persists after adding express

[ZeroCho]

Isn't there any information about which line the error happens?

[CruelEngine]

@ZeroCho it was at the same place where i'm calling express() . i think i solved it . Just changed the import to : import express from "express" . it solved the issue . @pzaenger , thanks for pointing me in the right direction

[ZeroCho]

Did you turn on esModuleInterop option in tsconfig?

[CruelEngine]

@ZeroCho yes i have it as true

[Aluan Haddad]

Why are you using webpack to develop a server-side app?

[Web User]

@pzaenger why does import express from "express" work whereas import * as express from "express" does not?

[Anatoly]

In this answer, you can get a detailed explanation of how esModuleInterop causes this error: stackoverflow.com/questions/56238356/…

[TadeoArmenta]

I'm getting this: Property 'default' does not exist on type 'typeof e'.