'Uncaught SyntaxError: Unexpected identifier - importing jquery

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?

Solution 1:^[1]

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

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mrdeadsven
Solution 2	Barr J

'Uncaught SyntaxError: Unexpected identifier - importing jquery

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]