SystemJS: Why am getting error jquery_1.default is

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

If you are using typescript set module=system in your tsconfig:

{
  "compilerOptions": {
    "module": "system",
    "target": "es6",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Answer 2

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

Answer 3

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