Utilizing Typescript and RequireJS for Incorporating jqueryui

Question

Utilizing Typescript and RequireJS for Incorporating jqueryui

Recently, I've been encountering issues with getting jQueryUI to function properly. Strangely enough, prior to attempting to integrate jQueryUI, using jQuery alone worked perfectly fine.

The current problem I'm facing is receiving a "TypeError: jQuery is not a function(...)" error in Chrome, even though jquery is designated as a dependency in the require.config file.

No errors occur during the compilation from .ts to .js.

Here is my initApp.ts code:

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/>
import * as jQuery from "jquery"; //Operates without any issues
import * as jQueryUI from "jquery-ui"; //Module cannot be found unless the d.ts file is modified

After compilation to js:

define(["require", "exports", "jquery-ui"], function (require, exports, jQuery) {...}

This is the content of jqueryui.d.ts:

/// <reference path="../jquery/jquery.d.ts"/>
declare module JQueryUI { <unmodified code>}

//Added this declare

declare module "jquery-ui" {
  export = jQuery;
}

For Require.config.js:

require.config({
    baseUrl: "./components/",
    paths: {
        "jquery": "./javascripts/lib/jquery-2.1.4",
        "jquery-ui": "./javascripts/lib/jquery-ui",
        "go": "./javascripts/lib/go-debug"
    },
    shim: {
        "jquery": {
          exports: "jQuery",
        },
        "jquery-ui": {
            //exports: "jQuery", //Even adding this line does not resolve the issue
            deps: ["jquery"],
        }
    },
});
require(["./javascripts/initApp"]);

Directory Tree structure:

typings/
    jquery/
        jquery.d.ts
    jqueryui/
        jqueryui.d.ts
web/
    components/
        javascripts/
            lib/
                jquery-2.1.4.js
                jquery-ui.js
                require.js
            initApp.js
            initApp.ts
            require.config.js

Links to complete d.ts files can be found here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/index.d.ts (jquery V3.3)

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jqueryui/index.d.ts (QueryUI V1.12)

If anyone could provide some assistance, it would be greatly appreciated.

jquery jquery-ui typescript requirejs

Answer 1

Answer №1

When using jQuery and jQueryUi together, the situation is that jQuery has an export, while jQueryUi imports jQuery, enhances it, and then exports $.widget instead of $.

As previously mentioned,

import * as jQuery from 'jquery-ui';

causes issues.

Similarly,

import jQueryUi from 'jquery-ui';

fails because jQueryUi never gets utilized in a value position and thus gets removed by the compiler, which can be beneficial for certain loading scenarios despite being tricky to handle.

The solution lies in informing TypeScript to import the library regardless of its usage, meaning it's imported for its side effects only.

In this case, ECMAScript offers a specific import form for such situations. By simply writing:

import 'jquery-ui';

you signify your reliance on 'jquery-ui' solely for its side effects.

It's worth noting that shims for jQuery are no longer necessary nowadays.

All you really need is:

import $ from 'jquery';
// TypeScript will retain this syntax for importing solely for side-effects!
import 'jquery-ui';

No modifications should be required for your require.config(....), although there may be room for misinterpretation on my part.

Additionally, consider updating the jQuery-UI declarations, as the current link provided was inactive due to package restructuring. These declarations do not specify exports and refer to jQuery as a global entity, causing complications in multi-version .d.ts scenarios, though this likely won't impact runtime functionality in your specific scenario.

Answer 2

When using jQuery and jQueryUi together, the situation is that jQuery has an export, while jQueryUi imports jQuery, enhances it, and then exports $.widget instead of $.

As previously mentioned,

import * as jQuery from 'jquery-ui';

causes issues.

Similarly,

import jQueryUi from 'jquery-ui';

fails because jQueryUi never gets utilized in a value position and thus gets removed by the compiler, which can be beneficial for certain loading scenarios despite being tricky to handle.

The solution lies in informing TypeScript to import the library regardless of its usage, meaning it's imported for its side effects only.

In this case, ECMAScript offers a specific import form for such situations. By simply writing:

import 'jquery-ui';

you signify your reliance on 'jquery-ui' solely for its side effects.

It's worth noting that shims for jQuery are no longer necessary nowadays.

All you really need is:

import $ from 'jquery';
// TypeScript will retain this syntax for importing solely for side-effects!
import 'jquery-ui';

No modifications should be required for your require.config(....), although there may be room for misinterpretation on my part.

Additionally, consider updating the jQuery-UI declarations, as the current link provided was inactive due to package restructuring. These declarations do not specify exports and refer to jQuery as a global entity, causing complications in multi-version .d.ts scenarios, though this likely won't impact runtime functionality in your specific scenario.

Answer 3

Answer №2

Encountering the same issue, I delved into various questions, finding the responses to be quite convoluted. Here's my simple solution:

By including reference paths at the beginning of each file, the problem is resolved with no further modifications necessary. TypeScript just needs to know where the definition files are located that outline all available functions. Adding a direct reference in each file addresses this issue:

/// <reference path="/typings/jquery.d.ts"/>
/// <reference path="/typings/someotherlibrary.d.ts"/>

Other suggested methods did not work for me. It could be due to my own shortcomings, or there might be bugs in the code or changes in the APIs. If you have a large number of files to resolve, this may not be the most efficient solution.

Answer 4

Encountering the same issue, I delved into various questions, finding the responses to be quite convoluted. Here's my simple solution:

By including reference paths at the beginning of each file, the problem is resolved with no further modifications necessary. TypeScript just needs to know where the definition files are located that outline all available functions. Adding a direct reference in each file addresses this issue:

/// <reference path="/typings/jquery.d.ts"/>
/// <reference path="/typings/someotherlibrary.d.ts"/>

Other suggested methods did not work for me. It could be due to my own shortcomings, or there might be bugs in the code or changes in the APIs. If you have a large number of files to resolve, this may not be the most efficient solution.

Answer 5

Answer №3

Previously, my workaround was included within the body of my question, but I am now reposting it as an answer to align with StackOverflow's editorial guidelines.

Aluan's response addresses some of the inquiries I raised in the preceding section.

To rectify the error manually, I edited the compiled javascript to incorporate the "jquery" and "jquery-ui" modules, assigning them to variables:

define(["require", "exports", "jquery", "jquery-ui"], function (require, exports, jQuery, jQueryUI) {...}

Nevertheless, I desired for the typescript compiler to automate this process, or something analogous to designate both jquery-ui and jquery as dependencies of my file.

The TypeScript interprets the declared module name and transforms that string into the dependency parameters of the AMD define() function. Consequently, the TypeScript definition d.ts file must declare the module by the same string that represents my library in require.config.js

Merely having an import statement does not prompt any action from the TypeScript compiler. The variable (foo, in this instance) into which the properties from the module/library are imported must be called at least once and should not clash with any existing variables in that scope.

Previously, I utilized this directive:

import * as jQuery from "jquery-ui"

This consumed the 'jQuery' variable name, causing the jQuery function to become unassignable to that variable name, resulting in the error: "jQuery is not a function(...)".

As jquery-ui merely extends the jQuery library, there is no need to invoke it. However, the compiler hesitated to actually compile jquery-ui as a dependency in my define(...). This issue was promptly resolved once I identified the underlying problem.

Final code

initApp.ts

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/>
import * as jQueryUI from "jquery-ui";
uiVar from "./uiVariables";
jQueryUI

Compiled to js:

define(["require", "exports", "jquery-ui"], function (require, exports, jQueryUI) {...}

require.config.js

require.config({
    baseUrl: "./components/",
    paths: {
        "jquery": "./javascripts/lib/jquery-2.1.4",
        "jquery-ui": "./javascripts/lib/jquery-ui",
        "go": "./javascripts/lib/go-debug"
    }
});
require(["./javascripts/app"]);

Answer 6

Previously, my workaround was included within the body of my question, but I am now reposting it as an answer to align with StackOverflow's editorial guidelines.

Aluan's response addresses some of the inquiries I raised in the preceding section.

To rectify the error manually, I edited the compiled javascript to incorporate the "jquery" and "jquery-ui" modules, assigning them to variables:

define(["require", "exports", "jquery", "jquery-ui"], function (require, exports, jQuery, jQueryUI) {...}

Nevertheless, I desired for the typescript compiler to automate this process, or something analogous to designate both jquery-ui and jquery as dependencies of my file.

The TypeScript interprets the declared module name and transforms that string into the dependency parameters of the AMD define() function. Consequently, the TypeScript definition d.ts file must declare the module by the same string that represents my library in require.config.js

Merely having an import statement does not prompt any action from the TypeScript compiler. The variable (foo, in this instance) into which the properties from the module/library are imported must be called at least once and should not clash with any existing variables in that scope.

Previously, I utilized this directive:

import * as jQuery from "jquery-ui"

This consumed the 'jQuery' variable name, causing the jQuery function to become unassignable to that variable name, resulting in the error: "jQuery is not a function(...)".

As jquery-ui merely extends the jQuery library, there is no need to invoke it. However, the compiler hesitated to actually compile jquery-ui as a dependency in my define(...). This issue was promptly resolved once I identified the underlying problem.

Final code

initApp.ts

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/>
import * as jQueryUI from "jquery-ui";
uiVar from "./uiVariables";
jQueryUI

Compiled to js:

define(["require", "exports", "jquery-ui"], function (require, exports, jQueryUI) {...}

require.config.js

require.config({
    baseUrl: "./components/",
    paths: {
        "jquery": "./javascripts/lib/jquery-2.1.4",
        "jquery-ui": "./javascripts/lib/jquery-ui",
        "go": "./javascripts/lib/go-debug"
    }
});
require(["./javascripts/app"]);

Answer 7

Answer №4

I created a simple demonstration on GitHub showcasing how to utilize TypeScript 2 with ES 6 modules and JQuery / JQuery UI featuring custom plugins. If you're looking to learn more, feel free to check it out here: https://github.com/lgrignon/typescript-es6-jquery

Answer 8

I created a simple demonstration on GitHub showcasing how to utilize TypeScript 2 with ES 6 modules and JQuery / JQuery UI featuring custom plugins. If you're looking to learn more, feel free to check it out here: https://github.com/lgrignon/typescript-es6-jquery

Utilizing Typescript and RequireJS for Incorporating jqueryui

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

combine multiple select options values in a single function using jQuery

Functions have been successfully deployed, but they are not appearing on the Azure Portal

What is the best way to create a universal function that can return a promise while also passing along event

Discover the inverse of Object Arrays interaction in TypeScript

Moving icon that appears when hovering over a menu button

Is there a way to activate the jQuery UI calendar from a cloned textbox, rather than the initial one?

leveraging the power of JQuery and Ajax for submitting a form

Troubleshooting: Issues with Integrating Javascript and CSS into

Using jQuery's AJAX method to serialize and upload form data

Generating a highchart by retrieving JSON data using AJAX

Comparison of jQuery, AngularJS, and Node.js

The type 'function that takes in a CustomEvent and returns void' cannot be assigned to a parameter of type 'EventListenerOrEventListenerObject'

Refresh a webpage using JavaScript (inside a jquery ajax call)

Guide to binding dates with PrimeNG's p-calendar

Why does the request body show as null even after passing body data in Prisma?

What can be done to prevent an ajax call on keyup when there are no search results?

Angular2/Typescript: Transforming a Javascript/Typescript Date into a C# DateTime string on the client side

Choose the option to replace "&" using regular expressions

Tips for extracting title and image from someone else's blog posts to share on your own website