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 /// <reference path="../node_modules/@types/jquery/index.d.ts" all works. but thats not the way i search. import statements have to work i think — mtizziani
– mtizziani, Commented Jun 27, 2018 at 13:43

mr deadsven · Accepted Answer · 2018-06-27 10:32:57Z

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, 2018 at 10:32

mr deadsven

7741 gold badge5 silver badges22 bronze badges

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

3 Comments

mtizziani Over a year ago

i have jquery local stored by node and dont want to load it from web. and the js file is found without problems

mr deadsven Over a year ago

@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 {}.

Justin Liu Over a year ago

You could load it with require: var jquery = require('jquery').

Barr J · Accepted Answer · 2018-06-27 10:40:05Z

0

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.

answered Jun 27, 2018 at 10:40

Barr J

11k2 gold badges31 silver badges49 bronze badges

3 Comments

mtizziani Over a year ago

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

Barr J Over a year ago

but do you have the TypeScript definition file for jQuery—jquery.d.ts?

mtizziani Over a year ago

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

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected identifier - importing jquery

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related