Uncaught SyntaxError: Unexpected identifier - importing jquery

Question

i have a problem with import statements in my website project. try to use nodejs - typescript and jquery

my project folder looks like that:

Project
- node_modules
- public
  - js
  - jquery/dist (copy form node_modules/jquery/dist)
  - index.html
- ts
  - test.ts
package.json
tsconfig.json

package.json:

{
  "name": "testclient",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/jquery": "^3.3.4",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "typescript": "^2.9.2"
  }
}

tsconfig.json:

{
    "compileOnSave": true,
    "compilerOptions": {
        "experimentalDecorators": true,
        "sourceMap": true,
        "strict": true,
        "module": "ES2015",
        "moduleResolution": "Classic",
        "target": "ES5",
        "lib": ["dom", "es5", "es2015", "es2015.promise"],
        "removeComments": true,
        "sourceMap": true,
        "outDir": "public/js",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "ts/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

index.html

<!DOCTYPE html>
<html lang="de">
    <header>
        <title>Test</title>
    </header>
    <body>
        Mein Test
    </body>
    <script type="text/javascript" src="js/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</html>

test.ts

import $  from 'jquery';
$(document).ready(() => {
    console.log('document is ready now');
    console.log($);
});

if i start the index.html in my chrome browser and open the console i get a error:

Uncaught SyntaxError: Unexpected identifier test.js:1

i figured out $ is not known at the moment i call it as jquery. so i cant use jquery in my script

what is the best practice to get it run without using ///<reference path=""/> for importing jquery. which tsconfig params are to set to get it running in browser?

by the way, if i change test.ts: `import $ from 'jquery` to `/// — mtizziani, Jun 27 '18 at 13:43

score 0 · Answer 1 · answered Jun 27 '18 at 10:32

0

Not sure if I understand the question completely (it's a bit weird formulated) but I think you are trying to implement jquery in your index page without having to download and map it and you can simply do it by implementing this in your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Also you are getting the error because your path to test.js is wrong it should be

<script type="text/javascript" src="../ts/test.js"></script>

if I take your mapping in concideration

answered Jun 27 '18 at 10:32

mrdeadsven

744
1
9
22

i have jquery local stored by node and dont want to load it from web. and the js file is found without problems – mtizziani Jun 27 '18 at 13:40
@mtizziani ok my bad, could it be in test.js that it should be: import {$,jQuery} from 'jquery'; If I remember correctly you have to use {}. – mrdeadsven Jun 27 '18 at 13:46
You could load it with require: `var jquery = require('jquery')`. – Justin Liu Jun 03 '20 at 15:16

score 0 · Answer 2 · answered Jun 27 '18 at 10:40

there is an issue with jquery and typescript. Most likely you need to download and include the TypeScript definition file for jQuery—jquery.d.ts—in your project. Please make sure you fulfilled the following steps before trying to use jquery:

Option 1: Install the @types package (Recommended for TS 2.0+)

In your project run:

npm install --save-dev @types/jquery

Then the compiler will resolve the definitions for jquery automatically.

Option 2: Download Manually

Download it here.

Option 3: Using Typings

If you're using typings then you can include it this way:

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

After setting up the definition file, import the alias ($) in the desired TypeScript file to use it as you normally would.

import $ from "jquery";
// or
import $ = require("jquery");

You mean need to compile with --allowSyntheticDefaultImports—add "allowSyntheticDefaultImports": true in tsconfig.json.

please have a look on the description, @types/jquery is defined in package.json and allready installed. and the tsconfig option is set to true, otherwise i get an error tsc is running — mtizziani, Jun 27 '18 at 13:42
but do you have the TypeScript definition file for jQuery—jquery.d.ts? — Barr J, Jun 28 '18 at 04:41
yes, it is in node_modules/@types/jquery/index.d.ts. if it is not installed tsc creates a compile error and my id also creates a error, but there is no error . and by the way, the typings module is outdated ;) — mtizziani, Jun 28 '18 at 08:26

Uncaught SyntaxError: Unexpected identifier - importing jquery

2 Answers2