Question

171

Error when using JQueryUI with TypeScript and DefinitelyTyped definition file

rated 0 times [ 172] [ 1] / answers: 1 / hits: 8995 / 7 Years ago, mon, april 10, 2017, 12:00:00

So I'm trying to use JQueryUI with TypeScript and so far I've installed JQueryUI with npm install jquery-ui-dist and JQuery with npm install jquery. I've also added the definition files from DefinitelyTyped with npm install --save-dev @types/jquery and npm install --save-dev @types/jquery-ui.

I've got the following file (some parts omitted):

///<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({

            ...

        });

    }

}

And upon building and running I get the following error:

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

So I guess there's some problem with my way of importing JQueryUI? Or maybe JQueryUI was not installed correctly? Although the import and definitions seem to be working correctly in VS Code.

This is also how I'm using them in the HTML file:

<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 ideas on how to solve the problem and use JQueryUI with TypeScript?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

vaughns

Add To Favorites

Follow

Total Points: 20

Total Questions: 112

Total Answers: 112

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

answered 7 Years ago carrington · Accepted Answer

This is not a TypeScript error, this is a runtime error.

jQueryUI is actually being loaded twice!

Once via a script tag

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

and then again in your module.

import $ from jquery;

import jquery-ui;



export default class ....

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

Additionally, I see that you have

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

Remove this! While it won't cause a runtime issue, that construct is for use when application code itself is written using globals, not modules.

If the types are not automatically picked up, either specify

compilerOptions: {

  moduleResolution: node

}

or use (shown with tsconfig.json next to node_modules)

compilerOptions: {

  baseUrl: ., // required with paths but can be something besides .

  paths: {

    jquery-ui: [

      node_modules/@types/jqueryui/index

    ]

  }

}