Avoiding duplication of jquery when using webpack and typescript

I encountered an error message that reads:

Uncaught TypeError: $(...).dialog is not a function

The issue appears to be arising from importing jquery twice, and I am struggling to find a solution.

Additionally, the error references bootstrap in the following excerpt:

PopupSelectCard.ts:44 Uncaught TypeError: $(...).dialog is not a function
    at Object.PopupSelectCard (PopupSelectCard.ts:44)
    at Object.defineProperty.value (Index.ts:21)
    at __webpack_require__ (bootstrap 92cf533…:19)
    at Object.defineProperty.value (bootstrap 92cf533…:62)
    at bootstrap 92cf533…:62
PopupSelectCard @   PopupSelectCard.ts:44
Object.defineProperty.value @   Index.ts:21
__webpack_require__ @   bootstrap 92cf533…:19
Object.defineProperty.value @   bootstrap 92cf533…:62
(anonymous) @   bootstrap 92cf533…:62

Below is my webpack.config.js configuration:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
...

In my TypeScript file, this is how I import jquery:

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

If I exclude the jquery import, compiler errors occur with the message:

Cannot find name '$'.

Can anyone provide guidance on resolving this issue?

jquerytypescriptwebpack

Answer №1

My solution required a few steps to make it work.

Initially, running the npm install jquery-ui command did not properly install jquery-ui since it needed to be compiled. Instead, I opted for npm install jquery-ui-dist.

Simply importing the files was not sufficient either. I found that I had to include the reference path in all of my .ts files that utilized jqueryui:

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

Additionally, I made modifications to my webpack.config.ts file by adding the following code:

var webpack = require('webpack');

module.exports = {
    ...
    plugins: debug ? [] : [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    }
    ...
};

Furthermore, I installed typings using npm install @types/jquery and npm install @types/jqueryui.

It took me a few attempts with different versions before everything finally worked. If anyone wishes to enhance my answer by explaining each part more clearly, please feel free to do so.

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

Is XMLHttpRequest just sitting idle...?

As a newcomer to the world of javascript and AJAX, I've been stuck on a single problem for the past 8 hours. Despite my best efforts, I just can't seem to figure out what's going wrong. On my website, I have an image with an onclick event ca ...

javascriptphpjqueryajax

Customized function enabling dynamic menu display based on varying screen dimensions

Looking for assistance with JS and jQuery as I am relatively new to it. Any help would be greatly appreciated... I'm currently working on a responsive header where I want to implement onclick functions for mobile and tablet resolutions only. I' ...

javascripthtmljquerycssjquery-events

Understanding the attribute types in Typescript React

While working on code using Typescript + React, I encountered an error. Whenever I try to set type/value in the attribute of <a> tag, I receive a compile error. <a value='Hello' type='button'>Search</a> This piece o ...

reactjstypescripttsx

How can you define the types of function arguments when destructuring arguments in TypeScript?

TS throws an error that states: Error:(8, 20) TS7031: Binding element 'on' implicitly has an 'any' type. Error:(8, 24) TS7031: Binding element 'children' implicitly has an 'any' type. Below is the function I am wor ...

typescript

Repair the image within the HTML image tag

Currently, I am working on an HTML page using Knockout.js and Bootstrap. I am facing an issue where the image I am adding in the image tag does not completely cover the image tag. Instead, there is a white background appearing which is not desired. I wan ...

jqueryhtmlcsstwitter-bootstrapknockout.js

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

Converting a Promise to an Observable in Angular using Typescript

I have a working method that functions as intended: getdata(): Promise<any> { let query = `SELECT * FROM table`; return new Promise((resolve, reject) => { this.db.query(query, (error, rows) => { if(error) reject(error); ...

angulartypescriptrxjsobservablees6-promise

Managing the automatic download of a zip file through JQuery - A guide

When working with a REST API and creating a zip file for forced download, the task is to call the API by sending necessary POST data through JQuery to initiate the download. How can this goal be accomplished effectively? ...

javascriptphpjqueryrest

Troubleshooting a Jquery Ajax Problem

Currently, I am developing a feature for my project that involves creating popup windows for tips. Once the user clicks on the 'turn on tips' button, these windows are supposed to appear next to specific elements. However, I encountered an issue ...

jqueryajax

React/Ionic: Avoiding SVG rendering using <img/> elements

I seem to be encountering an issue when trying to load SVG's in my React/Ionic App. I am fetching weather data from OpenWeatherMap and using the weather?.weather[0].icon property to determine which icon to display. I am utilizing icons from the follow ...

javascriptreactjstypescriptionic-frameworksvg

Over-extended Affix in Bootstrap 3.1.0

I'm currently using Bootstrap 3.1.0. The issue I've encountered is that when the "affix" becomes too long for the viewport, it ends up getting cut off and doesn't display the bottom items. Is there a way to make Bootstrap's affix featu ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

In order to make Angular function properly, it is crucial that I include app.get("*", [...]); in my server.js file

Recently, I delved into server side JavaScript and embarked on my inaugural project using it. The project entails a command and control server for my own cloud server, operating with angular, Expressjs, and bootstrap. Presently, I am encountering challeng ...

javascriptnode.jsangulartypescriptexpress

After defining the NEXTAUTH_URL and NEXTAUTH_SECRET variables, the getServerSession(authOptions) function in NextJS is returning null

I've been attempting to set up OAuth with the Google provider for my Next.js 13 web application. Unfortunately, I'm encountering an issue where getServerSession(authOptions) is returning null. Despite trying various solutions such as setting NEXT ...

reactjstypescriptprismanext-authnext.js13

Is there a way to incorporate the Indian rupee symbol into a Google chart?

I've been trying to incorporate the Indian Rupee symbol into a Google chart using the code below: var formatter = new google.visualization.NumberFormat({ prefix: '&#8377;' }); However, I'm encountering an issue where ...

javascriptjquerychartsgoogle-visualization

Is it possible for me to listen to an AngularJS event using regular JavaScript, outside of the Angular framework?

Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS? Here's some example pseudo code: imp ...

javascriptangulartypescriptrxjsdom-events

Utilizing jQuery or JavaScript to convert a PHP return value into an array for use in JavaScript

Is there a way to retrieve a JavaScript array from a PHP return value? For example, if a PHP script called 'makeArray.php' returns "first", "second", "third" (without the single quotes), how can I use this array in JavaScript to alert "second"? ...

javascriptjqueryarraysget

Encountering the error message "Error: 'preserveValueImports' is an unknown compiler option" while setting up a SvelteKit project

https://i.stack.imgur.com/fnidk.png Every time I set up a new sveltekit project using TypeScript, I keep encountering the error "Unknown compiler option 'preserveValueImports'.ts" in the tsconfig.json file. The error shows up above the line wher ...

node.jstypescriptnpmsveltesveltekit

Acquiring Twitter updates for a dynamic Bootstrap carousel display

I've been trying to load multiple tweets from the stream into the slideshow, but I can only get one to show up. I believe it has to do with the placement of the <div id="feed"> element, but I can't seem to figure out what I'm missing. ...

jqueryhtmlcsstwitter-bootstrap

Issue with formatter function not being returned by Chartjs when using angular doughnut chart for displaying labels and values

Is it possible to display label names and values around the graph near the datasets segment? I have implemented a formatter function, but it is not returning the expected results. If you check my requirement here, you'll see what I'm aiming for. ...

angulartypescriptchart.js

To ensure proper formatting, I must include a comma operator for numbers while typing and limit the decimal places to two

Could someone assist me in formatting a number to include commas and restrict the decimal places to two using regex? I have attempted the following, but need help making it work properly. Currently, when I enter a number it shows up as 1231244, however I ...

javascriptjqueryhtmlasp.net-mvctwitter-bootstrap