Typescript compilation. How to solve "Uncaught ReferenceError: exports is not defined"?

Question

JavaScript

Compilation succeeds using Gulp with the gulp-typescript plugin.
Unfortunately, when running the code in the browser, an error occurs:
Compiled JS has this line "Object.defineProperty(exports, "__esModule", { value: true });"
Accordingly, the error is: " main.js:2 Uncaught ReferenceError: exports is not defined "
tsc 2.4.2
The actual code is this:

main.ts

import * as _ from 'lodash';
import * as $ from 'jquery';

tsconfig.json

{
  "files": [
    "../../web/ts/main.ts"
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
   "noImplicitAny": true,
   "removeComments": true,
   "preserveConstEnums": true,
   "allowUnreachableCode": true
  },
  "exclude": [
    "node_modules"
  ]
}

gulpfile.js

var tsProject = ts.createProject("tsconfig.json");
gulp.task("typescript", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest(paths.jsFolder));
});

Where did I make a mistake?
And what is the right way to do imports taking into account the configuration of modules in the tsconfig.json file?

Answer 1

The error is due to the fact that you do not have commonjs connected, which you specified in tsconfig.