What mistakes am I making with Typescript and jquery-ui?

Having some difficulty integrating jquery, jquery-ui, and typescript in my project. I used npm to install both jquery and jquery-ui with the following commands:

npm install --save jquery
npm install --save jquery-ui

On my typescript file, I included them like this:

import * as $ from 'jquery';
import 'jquery-ui';

While attempting to create a dialog using jQuery-UI:

$("#my-id").dialog({ modal: true, etc, etc });

VS Code flagged "dialog" with the error message:

Property 'dialog' does not exist on type 'JQuery<HTMLElement>'

I searched for types for jquery-ui on DefinitelyTyped and found them at https://www.npmjs.com/package/@types/jqueryui. After installing it with npm, I added the import statement to my code:

import 'jqueryui'

It's interesting that the types are in 'jqueryui' while jquery-ui itself is 'jquery-ui' with a hyphen.

After resolving the previous error, when trying to bundle using gulp:

gulp bundle --ship

An error occured:

Module not found: Error: Can't resolve 'jqueryui'
  1. Why do I need @types/jqueryui separately instead of including them automatically for typescript?

  2. How can I successfully build without errors when including jqueryui in the project or build without it affecting the outcome?

Any insights would be greatly appreciated!

Answer №1

Grateful that I stumbled upon this issue and was able to resolve it by chance. Perhaps you could give it a try as well.

To fix the problem, make sure to adjust the properties of compilerOptions.paths in tsconfig.json and include "jquery-ui".

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "jquery":["node_modules/@types/jquery/index"],
      "jquery-ui":["node_modules/@types/jqueryui/index"]
    }
  },  
}

For an example of how to implement these changes:

import 'jquery';
import 'jquery-ui';

export class XXXXX {
  onClickVersions() {
    let r1 = $("#dialog-versions")
    if (r1.length == 0){
      $("<div id='dialog-versions'></div>").appendTo($("body"))
      setTimeout(() => {
        r1 = $("#dialog-versions")
        r1.dialog()
      }, 1);
    } else {
      r1.dialog()
    }
  }
}

If you do not set compilerOptions.paths, although errors may be displayed by the compiler, the program can still function properly since jquery and jquery-ui are already installed.

Additionally, remember that paths should not be added to .d.ts files, and the key in paths should be "jquery-ui" instead of "jqueryui", matching the package name in node_modules.

(I even conducted an experiment by renaming node_modules/jquery-ui to node_modules/jqueryui, making paths required to be defined as jqueryui rather than jquery-ui)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate apostrophes in a string by using regular expressions

Can someone help me with this word What is The Answer? I need to eliminate the space and apostrophe '. To remove spaces, should I use this method: data.text.replace(/ +/g, ""). But how can I remove the apostrophe? ...

The issue with adding rows to a dynamic HTML Table in Angular is that it is causing the previous rows to disappear

I have created a neat HTML table with three columns: <table > <thead> <tr> <td class="tdBorderEmail"><label>Action</label></td> <td class="tdBorderEmai ...

What steps can be taken to resolve the Typescript errors related to the window object in my Vue application?

Within my Vue 3 app component, I need to interact with custom properties on the Window object, as shown below: window.ZohoHCAsapSettings = { //<-- ERROR HERE ticketsSettings: { preFillFields: { email: { defaultValue: user.value?.emai ...

The revalidation process in react-hook-form doesn't seem to initiate

Stumbled upon a code example here Decided to fork a sandbox version (original had bugs and errors) I am trying to implement custom validation callbacks for each form input element by providing options in the register function, but the validate is only tr ...

The search feature on mobile devices is currently malfunctioning

The jQuery code below is used to search for products. It works perfectly in desktop view, but the responsive mobile view does not seem to be functioning correctly. Can someone assist me with fixing this issue? $("#search-criteria").keyup(function() { ...

Discovering an Element in jQuery through its ID using Spaces and Variables

My issue involves locating an element within another element using an ID and then adding a class when the ID is hardcoded. For example: var tableId = el.id; $('#' + tableId).find("[id='Checkout On']").addClass('highlight'); ...

Jquery successfully resets dropdown select menus on one page, but strangely it does not work on another page even though the code is identical

I have implemented a script using ajax, jQuery, and PHP to populate select boxes with data. Following this, I utilize the code below to reset the select dropdown menus if the user modifies any of the previous select boxes. An interesting issue has arisen - ...

Application built with Electron and Typescript encounters module-related crash

While working on developing a client using Electron with Typescript, I encountered the following error: https://i.sstatic.net/7qLGh.png The configuration in tsconfig.json looks like this: { "compilerOptions": { "target": "e ...

Different ways to fulfill the extends type interface requirement in TypeScript

Hey there, I'm looking to create reusable hooks for API requests. Here's the code I have so far: interface DataResponse<Data> { data: Data[]; } export const useRequestInfiniteHooks = <T extends DataResponse<T>>() => { co ...

The loop in Twitter Typeahead is configured to use the URL of the first field

I am facing an issue with my typeahead initialisation function. This function is meant to set remote URLs for all typeahead fields based on a data-url value, but it seems to be setting all fields to the URL of the first field. Even when I manually destroy ...

What is the process for incorporating a no-refresh submission using a hyperlink instead of a button?

Below are a few links that will trigger actions to insert data into different databases once clicked: <a href="#">insert into database1</a> <a href="#">insert into database2</a> <a href="#">insert into database3</a> Th ...

What exactly does Type refer to in Angular 2?

I keep encountering the Type keyword in various parts of the documentation. For instance, in this link, it mentions that the ComponentRef has a property called componentType which is of type Type<any>. Upon further investigation, I stumbled upon this ...

What is the best way to send AJAX post data to a Node.js server?

I am currently facing an issue with passing a unique ID object back to the server side using Ajax after making an API call. I need help figuring out what might be going wrong in my code. This is the client side code snippet where I loop through a JavaScri ...

Encountering a TypeScript error in MUI 5 when attempting to spread values in props

I am encountering an issue with a typescript error related to the MUI sx prop. The problem arises when I attempt to merge or spread multiple sx values into an sx prop, resulting in an error. It seems to work fine if only one item is present in the sx prop, ...

Transforming JSON into object instances with Angular

I am facing an issue in my Angular application where I need to convert a JSON object into an array. Although the mapping process is successful, the data within the array does not retain the properties and methods of my original object class. This hinders m ...

Tips for achieving vertical alignment of a Bootstrap 4 Carousel slide while it transitions

I am currently working on building a carousel to showcase testimonials, but I am facing some challenges regarding the vertical alignment of the slides. My goal is to have the slides centered when they enter the screen, but currently they start at the top ...

Error message "undefined" appears when using jQuery Ajax response in Internet Explorer

Having issues with jquery ajax requests. <script type="text/javascript> $(document).ready(function() { $.ajax({ type: "POST", async: false, cache: false, url: "/ajax/script.php", data: { display: 'u ...

viewing state data using reactjs

In an attempt to incorporate react context into one of my projects, I'm facing a challenge. Specifically, I want to showcase the state information once the state is modified, i.e., when the confirmFavourites function is invoked. export class AppProvi ...

Leveraging jQuery to interact with elements within an ASP:GridView

Currently, I am attempting to enhance the style of certain elements within a grid-view using jQuery. However, it seems that jQuery is not able to recognize those specific elements. Here's an example of what I've been trying to do: $("name").css( ...

The context of the selector causes an error to be thrown

Why does jQuery throw an exception when I attempt to select an element with context? The code is as follows: jQuery('b', "DAS<br/><br/><b>ID</b> = 02<br/><b>NAMA DAS</b> = CITARUM<br/><b>LUAS ...