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

prntscr.com/iblrdv so there's something wrong with your jquery — An0num0us
– An0num0us, Commented Feb 7, 2018 at 22:03
is jquery the path of your JQuery Library?? you have to type the path of your JQuery library — Kenry Sanchez
– Kenry Sanchez, Commented Feb 7, 2018 at 22:03

Anish · Accepted Answer · 2018-02-26 17:38:43Z

9

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, 2018 at 17:38

answered Feb 8, 2018 at 13:21

Anish

3,2323 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muflix Over a year ago

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.

Pradeep Kumar · Accepted Answer · 2018-02-08 04:46:44Z

-1

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';

answered Feb 8, 2018 at 4:46

Pradeep Kumar

1,3397 silver badges9 bronze badges

1 Comment

Matthias Over a year ago

No -- he is having a runtime error. Type declarations don't affect runtime code.

Collectives™ on Stack Overflow

Typescript and Jquery import - $ is not a function

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related