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
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';