Typescript and Jquery import - $ is not a function

Question

I'm using typescript with jquery, but I keep getting

Uncaught TypeError: $ is not a function

Has anybody seen this before?

I'm compiling typescript to ES2017, then transpiling to ES5 using webpack.

//tsconfig
{
      "compileOnSave": true,
      "compilerOptions": {
        "module": "es2015",

        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es2017",
        "noImplicitAny": false,
        "outDir": "Output",
        "esModuleInterop": true

      }
    }

How jquery is being used

import * as $ from "jquery";
 var form = $(document.createElement('form'));

The browser sees jquery ($)

But then I get this

http://prntscr.com/iblrdv so there's something wrong with your jquery — An0num0us, Feb 07 '18 at 22:03
is `jquery` the path of your JQuery Library?? you have to type the path of your JQuery library — Kenry Sanchez, Feb 07 '18 at 22:03
https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack — An0num0us, Feb 07 '18 at 22:06

Anish · Accepted Answer · 2018-02-26T17:38:43.700

6

Found the solution. To use $ as a function, I had to import the default from the the jquery npm module. With this import statement, it works.

import $ from "jquery";

I also had to turn this on in tsconfig.json

"allowSyntheticDefaultImports":  true

edited Feb 26 '18 at 17:38

answered Feb 08 '18 at 13:21

Anish

2,633
3
23
27

With this approach I get the `Uncaught SyntaxError: The requested module '../lib/jquery/dist/jquery.js' does not provide an export named 'default'` * But I did not install jquery via `npm`, that might be the reason. – Muflix Oct 25 '20 at 10:08

score 0 · Answer 2 · answered Feb 08 '18 at 04:46

Seems like you are missing jQuery type definitions which are needed by typescript compiler. You need to install both jQuery and jQuery type definitions. If you are using npm to install packages, the below steps will work. (Otherwise make sure you have both the packages installed in your environment)

1.Install jQUery

npm install --save jquery

2.Install jQuery type definitions

npm install -D @types/jquery

Now, you can import jQuery in your code as below

import * as $ from 'jquery';

No -- he is having a runtime error. Type declarations don't affect runtime code. — Matthias, Aug 21 '19 at 21:58

Typescript and Jquery import - $ is not a function

2 Answers2