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
– Carsten Løvbo Andersen, Commented Apr 12, 2019 at 7: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
– Ray Hulha, Commented Apr 12, 2019 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
– KyleMit ♦, Commented Oct 15, 2020 at 19:40

Ray Hulha · Accepted Answer · 2019-04-12 06:51:19Z

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, 2019 at 6:51

Ray Hulha

11.3k5 gold badges57 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks I'm able to use it like this. How about css? I can't see jquery CSS though.