Typescript: import express unexpected idenfitier with ts-node-dev

Question

I am starting a new project with Typescript and i would like to make the node server with typescript using express. I've been following a tutorial about how to run a Typescript file without having to compile files in this link: https://medium.com/javascript-in-plain-english/typescript-with-node-and-express-js-why-when-and-how-eb6bc73edd5d.

The problem i am facing now is that when executing the script that runs ts-node-dev, it throws an error:

> [email protected] server:start /home/oscar/Documents/vidursyn
> ts-node-dev --respawn --transpileOnly ./src/server/app.ts

Using ts-node version 7.0.1, typescript version 3.2.4
/home/oscar/Documents/vidursyn/src/server/app.ts:1
(function (exports, require, module, __filename, __dirname) { import express from "express";
                                                                     ^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Object.obj.(anonymous function) [as runInThisContext] (/home/oscar/Documents/vidursyn/node_modules/ts-node-dev/lib/hook.js:30:19)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Module._compile (/home/oscar/Documents/vidursyn/node_modules/source-map-support/source-map-support.js:517:25)
    at Module.m._compile (/tmp/ts-node-dev-hook-9240179406846312.js:56:25)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at require.extensions.(anonymous function) (/tmp/ts-node-dev-hook-9240179406846312.js:58:14)
    at Object.nodeDevHook [as .ts] (/home/oscar/Documents/vidursyn/node_modules/ts-node-dev/lib/hook.js:61:7)
[ERROR] 13:18:43 SyntaxError: Unexpected identifier

The file's content is too simple, it goes like this:

import express         from "express";
import { environment } from "../../lib/environment";
import * as config     from "../../config.json";

const configServer = config[environment].server;
const app = express();

app.get("/", (request: express.Request, response: express.Response) => {
  response.end("Hello World");
});

app.listen(configServer.port, () => {
  console.log(`Server listening at port ${configServer.port}`);
});

I've searched around stackoverflow and some other posts in the internet and they all suggest to add --module-experimental as a flag in the command, but even with that flag it still throws the same error, which is why i am making this question.

Just in case to see how the tsconfig.json looks like:

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es6",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

and package.json:

{
  "name": "ng-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng test/e2e",
    "server:start": "ts-node-dev --respawn --transpileOnly ./src/server/app.ts"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/express": "4.16.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "express": "4.17.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "ts-node-dev": "1.0.0-pre.39",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

Answer 1

Set 'module' to 'commonjs' in your tsconfig.