jspm / jQuery / TypeScript - module "jquery" has no default export

Question

I'm trying to bootstrap a web app using TypeScript and jspm & system.js for module loading. I'm not getting very far. After installing jspm, and using it to install jQuery:

jspm install jquery

And the basics:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
        System.import('main');
</script>

main.ts:

import $ from "jquery";

export class Application  {
    constructor() {
        console.log($);
    }
}

The TypeScript won't compile because "Module 'jquery' has no default export.

The generated config.js has the correct mapping: "jquery": "npm:[email protected]"

Gianna

Did you tried import * as $ from "jquery";? – Senghor

Thanks that works! If you submit that as an answer I can accept it. – Gianna

This worked for me! – Nigh

Answer 1

When the module doesn't have a default export, you can import the complete module as object: import * as $ from "jquery";

or import named exports: import { ajax, css } from "jquery";

Senghor

Named exports doesn't work. Module jquery has no exported member 'css'. – Tumefaction

Do not forget run: npm install jquery. – Gelb

If the exported module is in CommonJS /AMD/UMD format (single exported member) the TypeScript documentation states you should use import $ = require("jquery"); typescriptlang.org/docs/handbook/… Is there an advantage to either method? – Cryptanalysis

Answer 2

If you are using visual studio, update the typescript plugin.

To obtain the latest version for visual studio 2017, go there

Alcorn