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

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


My problem was not with jQuery but with sharp. But as google leads me here after I searched for my problem I think it is a common problem with ts and so this answers will help others with the same problem with other modules. (But the same error)
And I didn't want to change my ts.config file as it seems not right.

So I found this solution, I hope it works for you too:
Instead of import sharp from "sharp";
I used: import * as sharp from "sharp";

So in your case it would be:import * as $ from 'jquery';