SystemJS: Why am getting error jquery_1.default is not a function when importing jquery

Add "esModuleInterop": true line inside compilerOptions in tsconfig.json file, like following:

{
"compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,  // <-- ADD THIS LINE
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    }
},
"include": [
    "src/**/*"
  ]
}

If you are using IntelliJ, it may not detect the change in tsconfig.json immediately, so it can be useful to try restarting IntelliJ to see if it works.

Important Note:

Please note that this time, import * as express from 'express'; notation will generate an error.

See TypeScript 2.7 Reference (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html) :

Note: The new behavior is added under a flag to avoid unwarranted breaks to existing code bases. We highly recommend applying it both to new and existing projects. For existing projects, namespace imports (import * as express from "express"; express();) will need to be converted to default imports (import express from "express"; express();).


I believe this is an issue with typescript. From what I can tell it does not respect the es6 style import statement for legacy code, ie code that does not have an export. If you use the old style var $ = require('jquery') it works.

The fix for this is to use the --allowSyntheticDefaultImports flag to true.

The first link at the bottom of the the typescript issue describes this fix

See these discussions for more detail

SystemJS and default import with export = proposal

Importing defaults with es6 syntax doesn't work

Can't find proper default variable export syntax