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