Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Question

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Currently, I'm attempting to incorporate JQueryUI with TypeScript by first installing JQueryUI using npm install jquery-ui-dist, and then installing JQuery with npm install jquery. Additionally, I have included the definition files from DefinitelyTyped using

npm install --save-dev @types/jquery

and

npm install --save-dev @types/jquery-ui

.

The code snippet below showcases a part of my file (some sections are excluded):

///<reference path="../../node_modules/@types/jqueryui/index.d.ts"/>
import * as $ from "jquery";
import "jquery-ui";

export default class Resizer {

    public static extraMargin = 5;

    public static setVerticalResizer(...) {
        ...
        let topElem: HTMLElement = <HTMLElement> cardElem.querySelector(".my-class");

        $(topElem).resizable({
            ...
        });
    }
}

After building and running the code, an error message surfaces:

Uncaught TypeError: r(...).resizable is not a function

It seems like there might be an issue in how I am importing JQueryUI or possibly an incorrect installation of JQueryUI. However, everything appears to import and define correctly within VS Code.

In the HTML file, this is the method I use:

<script src="node_modules/jquery-ui-dist/jquery-ui.mis.js"></script>
<link rel="stylesheet" href="node_modules/jquery-ui-dist/jquery-ui.min.css">

Any suggestions on resolving this problem and successfully integrating JQueryUI with TypeScript?

javascript jquery-ui typescript npm definitelytyped

Answer 1

Answer №1

This is not a TypeScript error, it's actually a runtime issue.

jQueryUI seems to be loaded twice!

First through a script tag:

<script src="node_modules/jquery-ui-dist/jquery-ui.mis.js"></script>

and then again within your module.

import $ from "jquery";
import "jquery-ui";

export default class ....

The code in the module above is correct, but the duplicate script tag is causing problems.

In addition, I notice that you have:

///<reference path="../../node_modules/@types/jqueryui/index.d.ts"/>

You should remove this! Although it won't create a runtime error, that reference is meant for global usage, not modules.

If the types are not being recognized automatically, you can either specify:

"compilerOptions": {
  "moduleResolution": "node"
}

or utilize (demonstrated with tsconfig.json next to node_modules):

"compilerOptions": {
  "baseUrl": ".", // necessary with paths but can be something other than "."
  "paths": {
    "jquery-ui": [
      "node_modules/@types/jqueryui/index"
    ]
  }
}

Answer 2

This is not a TypeScript error, it's actually a runtime issue.

jQueryUI seems to be loaded twice!

First through a script tag:

<script src="node_modules/jquery-ui-dist/jquery-ui.mis.js"></script>

and then again within your module.

import $ from "jquery";
import "jquery-ui";

export default class ....

The code in the module above is correct, but the duplicate script tag is causing problems.

In addition, I notice that you have:

///<reference path="../../node_modules/@types/jqueryui/index.d.ts"/>

You should remove this! Although it won't create a runtime error, that reference is meant for global usage, not modules.

If the types are not being recognized automatically, you can either specify:

"compilerOptions": {
  "moduleResolution": "node"
}

or utilize (demonstrated with tsconfig.json next to node_modules):

"compilerOptions": {
  "baseUrl": ".", // necessary with paths but can be something other than "."
  "paths": {
    "jquery-ui": [
      "node_modules/@types/jqueryui/index"
    ]
  }
}

Answer 3

Answer №2

Update: check out the functioning jsfiddle

It appears that there may be an issue with how I am importing JQueryUI. Could it be possible that JQueryUI was not installed properly? Although everything seems to be correctly set up in VS Code.

The problem arises during the compilation of the typescript. The inclusion of <script> tags is not crucial for this process.

Upon examining the jqueryui/index.d.ts, it can be observed that resizable is outlined as follows:

interface JQuery {
    ...

    resizable(): JQuery;
    resizable(methodName: 'destroy'): void;
    resizable(methodName: 'disable'): void;
    resizable(methodName: 'enable'): void;
    resizable(methodName: 'widget'): JQuery;
    resizable(methodName: string): JQuery;
    resizable(options: JQueryUI.ResizableOptions): JQuery;
    resizable(optionLiteral: string, optionName: string): any;
    resizable(optionLiteral: string, options: JQueryUI.ResizableOptions): any;
    resizable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
    ... 
}

(Refer to index.d.ts on GitHub)

and npm install --save-dev @types/jquery-ui.

There is no package called jquery-ui? It should be @types/jqueryui

After correctly installing the packages @/types/jquery-ui it works for me:

///<reference path="node_modules/@types/jqueryui/index.d.ts"/>

export default class Resizer {

    public static extraMargin = 5;

    public static setVerticalResizer() {

        var cardElem;
        let topElem: HTMLElement = <HTMLElement> cardElem.querySelector(".my-class");

        $(topElem).resizable({

        });
    }
}

In VS code:

https://i.stack.imgur.com/twVZV.png

Also from commandline, no errors and a javascript file is created (running from Powershell):

& "C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1\tsc.exe" .\test.ts

If is still not working, please share your tsconfig.json (if you have one) and the code and command how it doesn't compile

Answer 4

Update: check out the functioning jsfiddle

It appears that there may be an issue with how I am importing JQueryUI. Could it be possible that JQueryUI was not installed properly? Although everything seems to be correctly set up in VS Code.

The problem arises during the compilation of the typescript. The inclusion of <script> tags is not crucial for this process.

Upon examining the jqueryui/index.d.ts, it can be observed that resizable is outlined as follows:

interface JQuery {
    ...

    resizable(): JQuery;
    resizable(methodName: 'destroy'): void;
    resizable(methodName: 'disable'): void;
    resizable(methodName: 'enable'): void;
    resizable(methodName: 'widget'): JQuery;
    resizable(methodName: string): JQuery;
    resizable(options: JQueryUI.ResizableOptions): JQuery;
    resizable(optionLiteral: string, optionName: string): any;
    resizable(optionLiteral: string, options: JQueryUI.ResizableOptions): any;
    resizable(optionLiteral: string, optionName: string, optionValue: any): JQuery;
    ... 
}

(Refer to index.d.ts on GitHub)

and npm install --save-dev @types/jquery-ui.

There is no package called jquery-ui? It should be @types/jqueryui

After correctly installing the packages @/types/jquery-ui it works for me:

///<reference path="node_modules/@types/jqueryui/index.d.ts"/>

export default class Resizer {

    public static extraMargin = 5;

    public static setVerticalResizer() {

        var cardElem;
        let topElem: HTMLElement = <HTMLElement> cardElem.querySelector(".my-class");

        $(topElem).resizable({

        });
    }
}

In VS code:

https://i.stack.imgur.com/twVZV.png

Also from commandline, no errors and a javascript file is created (running from Powershell):

& "C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1\tsc.exe" .\test.ts

If is still not working, please share your tsconfig.json (if you have one) and the code and command how it doesn't compile

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Answer №1

Answer №2

Similar questions

Struggling to retrieve the JSON information, but encountering no success

Set a maximum limit for the number of checkboxes that can be selected

Having trouble getting the JSONP request to render properly, encountering persistent errors

The type 'Observable<any>' cannot be assigned to the type 'Observable<T>'

Please include the document with a name that contains spaces

The class functions perfectly under regular circumstances but ceases to operate once it is initialized

Add the div id to the script

Looking for assistance with troubleshooting my isotope.js [code written in jquery and html]?

Possible solution to address the issue: xhr.js:178 encountered a 403 error when attempting to access https://www.googleapis.com/youtube/v3/search?q=Tesla

React - Highcharts Full Screen dark overlay

Invoke OnSelectedIndexChanged from GridView prior to any other function execution

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

Ways to store AJAX response data for future use

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

Preventing Bootstrap modal from closing when clicking outside of the modal in Angular 4

What is the best way to check if a function has been successfully executed?

I'm encountering an issue where the data in my personalDeatail model's add value is not updating automatically. Can someone please help me

What steps are needed to resolve the issue of inserting data into a database using Sequelize with Node Express and M

The model's function received the error message "Not a valid function."

Problem encountered when Next.js and CSRF token interact on the server