jquerytypescriptsystemjsjspm

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

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

Solution

  • 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"
  ]
}