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

Question

I have installed foundation via jspm install foundation, then import foundation and jquery.

The problem I am having is that if I import jquery via import $ as 'jquery' I get the error jquery_1.default is not a function. If I import jquery via import * as $ from jquery it works as expected

I am calling $(document).foundation(); to initialize foundations javascript components. Below is my main.ts

import 'foundation'
import $ from  'jquery';
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();    

  aurelia.start().then(a => a.setRoot())
      .then(a => {
        // Initialize framework
        $(document).foundation();
      });
}

The rest of the code is just default navigation to a simple page that contains a foundation nav bar with dropdown list

Note: I also had to explicitly install jquery even though jquery is listed as a dep.

I made the original override for foundation 6, clearly did something wrong but it seemed to be working at the time. However, I have since found out that when bootstrap was installed it put jquery in github:components and that seemed make it so jquery did not have to explicitly be installed. So at the time all seemed fine.

To reproduce just use the aurelia skeleton and add a page with a foundation control, adding the $(document).foundation() as above

Answer 1

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();).