jQuery UI + Typescript: jQuery is not defined

Question

Trying to wrangle jQuery UI into a Typescript 2.6.2 project that already has jQuery working nicely, but running into a brick wall. Compiles fine but at runtime I get this:

Exception has occurred: ReferenceError

ReferenceError: jQuery is not defined

Here is my main.ts file:

import $ = require('jquery');
import "jqueryui";

$(document).ready(() =>
{
    $( "#slider" ).slider( {
        orientation: "vertical",
        min: 0,
        max: 150,
        value: 50
    } );
});

Here is the index.html file:

<!doctype html>
<html>
<head>
    <script src="./bundle.js"></script>
</head>
<body>
    <div id="slider"></div>
</body>
</html>

For reference, here are my tsconfig.json, package.json, and the command line I use to transpile to JavaScript:

tsconfig.json:

{
    "compilerOptions":
    {
        "target": "es2015",
        "module": "commonjs",
        "moduleResolution":"node"
    },
    "include":
    [
        "spec/*.ts"
    ]
}

package.json:

{
  "name": "tsbugger",
  "version": "0.0.1",
  "description": "debug config test",
  "main": "index.js",
  "scripts": {
    "test": "jasmine"
  },
  "repository": {
    "type": "git",
    "url": ".git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/jasmine": "^2.8.6",
    "@types/jquery": "^3.3.0",
    "@types/jqueryui": "^1.12.2",
    "browserify": "^15.2.0",
    "jasmine": "^2.9.0",
    "jquery": "^3.3.1",
    "jqueryui": "^1.11.1",
    "tsify": "^3.0.4",
    "typescript": "^2.6.2"
  }
}

build command:

browserify main.ts --debug -p tsify 1>bundle.js

How can I get jQuery UI working in Typescript with proper typings?

similar question

Ray Hulha
– Ray Hulha

2019-04-12 06:44:05 +00:00
Commented Apr 12, 2019 at 6:44 — Ray Hulha
– Ray Hulha, Commented Apr 12, 2019 at 6:44

Pavel · Accepted Answer · 2018-02-25 05:46:22Z

1

Looks like jquery-ui supports only amd modules and global installation. So, try to change tsconfig.json to use module: 'amd', or just add jquery and jqueryui via <script> tag without import statement.

There code from jquery-ui.js

(function( factory ) {
if ( typeof define === "function" && define.amd ) {

    // AMD. Register as an anonymous module.
    define([ "jquery" ], factory );
} else {

    // Browser globals
    factory( jQuery );
}

answered Feb 25, 2018 at 5:46

Pavel

2,5721 gold badge30 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI + Typescript: jQuery is not defined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related