Uncaught SyntaxError: Unexpected identifier - importing jquery

1
votes

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?

2
javascriptjquerynode.jstypescript
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

2 Answers

0
votes

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

0
votes

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.