typescript error: TS2304: Cannot find name '$'

Question

The statement

 x = $('#msgBox_' + scope.boxId).position().left;

generates an

error TS2304: Cannot find name '$'

although jquery and @types are installed in the node_modules folder.

My tsconfig.json looks like that:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "declaration": true
  },
  "exclude": [
    "node_modules"
  ]
}

How can I fix that?

How do you access `$` in your code? As a global variable? – Yury Tarabanko Jun 28 '17 at 08:06 — Yury Tarabanko, Jun 28 '17 at 08:06
Could you please add your tsconfig.json? – OctoD Jun 28 '17 at 08:25 — OctoD, Jun 28 '17 at 08:25
Try to remove the include part. – OctoD Jun 28 '17 at 08:35 — OctoD, Jun 28 '17 at 08:35
What version of ts are you using? – OctoD Jun 28 '17 at 08:44 — OctoD, Jun 28 '17 at 08:44

score 8 · Answer 1 · edited Apr 08 '18 at 01:36

8

Did you try to :

 import $ = require('jquery');

at the 1 line? This should work. Though you should have a deeper look into es6 modules and ts modules to get a grip on how you could take advantage of the es6 modular system. Also d.ts files...

This should be helpful: https://www.typescriptlang.org/docs/handbook/modules.html

edited Apr 08 '18 at 01:36

Aluan Haddad

29,886
8
72
84

answered Jun 28 '17 at 08:44

George Pasquali

328
1
8

at the 1st line of which file? – Oblomov Jun 28 '17 at 08:45
The ones where you use jquery. – George Pasquali Jun 28 '17 at 08:47
Due to current tsconfig.json, this should not be required. Jquery is defined also as a global var, you have to import it only if the "isolatedModules" flag is true. – OctoD Jun 28 '17 at 08:49
Actually, it fixes the bug. However: In a previous version of the same code, this import was not necessary. I currentyl don't really understand, why I need it now. – Oblomov Jun 28 '17 at 08:52
@OctoD How and where would I best define jquery as a global var in a typescript project? – Oblomov Jun 28 '17 at 08:53
It is not defined as a global variable... It is only installed as a node_module. Also you should install @types/jquery if you havent. – George Pasquali Jun 28 '17 at 09:01
you could make it global like this window.$ = $; But this is bad practice i guess... – George Pasquali Jun 28 '17 at 09:01
1

@user1934212 it's defined both as global or module inside the types definition https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/index.d.ts you should do nothing. – OctoD Jun 28 '17 at 11:18
@OctoD: Interesting point. I just looked into my node_"modules/@types" folder and there is no "jquery" subfolder. How can I fix that? – Oblomov Jun 28 '17 at 11:50
Try to run npm i --save-dev @types/jquery. – OctoD Jun 28 '17 at 17:04

score 8 · Answer 2 · answered Apr 07 '18 at 17:58

8

If AngularCLI is where your injecting JQuery, then in your controller/component, you can declare the variable like so:

declare var $: any;

answered Apr 07 '18 at 17:58

Brant

1,764
11
18

I had moved some code from an Angular 2+ solution to an Angular 6 solution and this solved the problem for me. – StackOverflowUser Jun 20 '18 at 21:00

score 7 · Accepted Answer · answered Jul 04 '17 at 13:22

7

Turns out I was missing the "@types/jquery" node module, which contains a definition of "$". Once I added "@types/jquery": "^3.2.5" to the list of "devDependencies" in my package.json and reinstalled via "npm install", everything worked fine.

answered Jul 04 '17 at 13:22

Oblomov

8,953
22
60
106

score 1 · Answer 4 · answered May 07 '19 at 11:19

One reason for this kind of error is your node_modules doesn't contain the type definitions for jquery ie. the package @types/jquery is missing.

My workaround is as follows:

Open the command prompt in the root of your project folder and type:

npm install --save @types/jquery.

If you are posed with a question to choose the version, choose the latest one.
Once the above command ends successfully, run yarn install.
Once the above install is success, run yarn start to start your project.

typescript error: TS2304: Cannot find name '$'

4 Answers4

Linked