Why do I keep receiving the error "jquery_1.default is not a function" while trying to import jQuery using SystemJS

Question

Why do I keep receiving the error "jquery_1.default is not a function" while trying to import jQuery using SystemJS

After installing foundation using jspm install foundation, and importing jquery alongside it

I encountered an issue where importing jquery with import $ as 'jquery' resulted in the error message "jquery_1.default is not a function." However, importing jquery with import * as $ from 'jquery' worked as expected.

To initialize foundations javascript components, I utilized $(document).foundation();. Below is my main.ts file:

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 consists of standard navigation to a basic page featuring a foundation navbar with dropdown list elements.

Note: Despite jquery being listed as a dependency, I had to explicitly install it.

Initially, when I overrode foundation 6, everything appeared to be functioning correctly. However, upon further inspection, I discovered that bootstrap had placed jquery in github:components, eliminating the need for separate installation. This oversight initially masked the issue.

To replicate this problem, simply use the aurelia skeleton and add a page containing a foundation control, including the $(document).foundation() call as shown above.

jquery typescript systemjs jspm

Answer 1

Answer №1

To enhance compatibility, insert the "esModuleInterop": true line within the compilerOptions section of your tsconfig.json file as shown below:

{
"compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,  // <-- INSERT THIS LINE
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    }
},
"include": [
    "src/**/*"
  ]
}

If you're using IntelliJ, it might not detect the changes in tsconfig.json immediately, so consider restarting IntelliJ to check if it resolves the issue.

Important Note:

Please be aware that with this configuration, the syntax

import * as express from 'express';

will now cause an error.

Refer to TypeScript 2.7 Reference (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html) for more information:

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 2

To enhance compatibility, insert the "esModuleInterop": true line within the compilerOptions section of your tsconfig.json file as shown below:

{
"compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,  // <-- INSERT THIS LINE
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    }
},
"include": [
    "src/**/*"
  ]
}

If you're using IntelliJ, it might not detect the changes in tsconfig.json immediately, so consider restarting IntelliJ to check if it resolves the issue.

Important Note:

Please be aware that with this configuration, the syntax

import * as express from 'express';

will now cause an error.

Refer to TypeScript 2.7 Reference (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html) for more information:

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

Answer №2

It seems that there is an issue with typescript when it comes to handling legacy code without exports using es6 style import statements. One workaround is to revert back to the old-style var $ = require('jquery') syntax.

To fix this, you can set the --allowSyntheticDefaultImports flag to true.

For more information on how to address this issue, check out the first link provided in the typescript issue description below.

For further discussion and details, see the following links:

SystemJS and default import with export = proposal

Importing defaults with es6 syntax doesn't work

Can't find proper default variable export syntax

Answer 4

It seems that there is an issue with typescript when it comes to handling legacy code without exports using es6 style import statements. One workaround is to revert back to the old-style var $ = require('jquery') syntax.

To fix this, you can set the --allowSyntheticDefaultImports flag to true.

For more information on how to address this issue, check out the first link provided in the typescript issue description below.

For further discussion and details, see the following links:

SystemJS and default import with export = proposal

Importing defaults with es6 syntax doesn't work

Can't find proper default variable export syntax

Answer 5

Answer №3

My issue wasn't related to jQuery, but rather to sharp. After finding this post through google search, it seems like this is a common problem with ts, and hopefully this solution will assist others facing the same issue with different modules (though the error message may be similar).
I didn't want to modify my ts.config file as it didn't feel right.

I stumbled upon this fix which worked for me, and I hope it does for you too:
Instead of

import sharp from "sharp";

I used:

import * as sharp from "sharp";

Therefore, in your scenario, it should be: import * as $ from 'jquery';

Answer 6

My issue wasn't related to jQuery, but rather to sharp. After finding this post through google search, it seems like this is a common problem with ts, and hopefully this solution will assist others facing the same issue with different modules (though the error message may be similar).
I didn't want to modify my ts.config file as it didn't feel right.

I stumbled upon this fix which worked for me, and I hope it does for you too:
Instead of

import sharp from "sharp";

I used:

import * as sharp from "sharp";

Therefore, in your scenario, it should be: import * as $ from 'jquery';

Answer 7

Answer №4

For those working with TypeScript, remember to set module=system in your tsconfig file:

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

Answer 8

For those working with TypeScript, remember to set module=system in your tsconfig file:

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

Why do I keep receiving the error "jquery_1.default is not a function" while trying to import jQuery using SystemJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display element on the webpage upon clicking an event

Displaying Mustache.js in an HTML template

Activating list anchor upon click

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Dynamic Loading Spinner

How can I utilize regex to change the background color of a specific character in a react/typescript application?

Set focus on Bootstrap modal when closing the popup near the input field within the body

Showing information from a cascading dropdown list in PHP

Enhancing radio buttons by swapping them out with images

Ensure that CSS transformation rotation always moves in a clockwise direction without surpassing 360 degrees

What are the steps to implementing partial page functionality with the $http service in Angular?

Recently updated the versions of jquery/jquery-ui, and event.stopPropagation(); is no longer functioning as expected

Should the use of Url.Action in HTML/JavaScript blocks be considered a best practice from an MVC perspective?

The code snippet $(this).nextAll("#...").eq(0).text("***") isn't functioning as expected

Utilize MVC to choose the appropriate dropdown selection once it has been dynamically populated with jQuery

Implementing a Set polyfill in webpack fails to address the issues

Incorporate a dialogue box utilizing jQuery with dynamically created HTML elements using jQuery

Is it possible to convert any object field that holds an empty string to null without having to iterate through

Having trouble getting the code for sending HTML input fields with an attachment field to work in PHP, jQuery, and Ajax