How can I use jQuery UI (jqueryui) with StackBlitz and TypeScript and NPM

Question

I am trying to use jQuery UI in StackBlitz.

I am also trying to install it as a dependency and without a script tag.

I understand that I have to add @types/jquery and @types/jqueryui as dependencies.

But when I add this in the index.ts

import $ from "jquery";
import "jqueryui";

I get the error: "jQuery is not defined"

I'm a bit confused, did you manage to write the question, search and test a solution and post the answer in the same minute? — Carsten Løvbo Andersen, Apr 12 '19 at 07:00
I researched the issue and found related answers. I pieced together the solution for my particular case and thought someone else might appreciate the combined, specific solution. Judging from the prominent "Answer your own question" option on every question I assumed this was welcome around here. Guess I was wrong... — Ray Hulha, Apr 12 '19 at 13:42
@CarstenLøvboAndersen, asking and answering a question that doesn't exist on the site yet is a perfectly valid use case and helps other people who stumble across it in the future (like me) - thanks Ray! — KyleMit, Oct 15 '20 at 19:40

score 2 · Answer 1 · answered Apr 12 '19 at 06:51

2

This code seems to do the trick:

import $ from "jquery";
declare var global: any
global.jQuery = $;
import "jqueryui";

Here is a screenshot of the dependencies:

answered Apr 12 '19 at 06:51

Ray Hulha

1

Thanks I'm able to use it like this. How about css? I can't see jquery CSS though. – IsmailS Aug 27 '22 at 05:11

1 Answers1