Question

190

import jQuery-ui and jQuery with npm install

rated 0 times [ 197] [ 7] / answers: 1 / hits: 18418 / 8 Years ago, sun, july 17, 2016, 12:00:00

Somewhat new to npm here..

I'd like to use jQuery-ui in my project. I'm used to importing both jQuery and jQuery-ui with a script tag in my HTML, but I would like to import both using npm install.

I got jQuery working with.

import $ from 'jquery'

But whenever I try to import jquery-ui I get this error:

Uncaught ReferenceError: jQuery is not defined

There's a lot of posts about this error. But all of them seem to be centered around people just putting their script tags for jQuery and jQuery-ui in the wrong order.

I can't find anything on how to install both jQuery and jQuery-ui with npm install?

Any ideas?

Answers

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

jackelyn

Add To Favorites

Follow

Total Points: 303

Total Questions: 103

Total Answers: 102

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

jackelyn questions

1 NodeJS Sendgrid 401 unauthorized

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Get accessToken in auth0

Sun, Feb 28, 21, 00:00, 3 Years ago

1 How to target a styled component inside another styled component?

Fri, Jan 1, 21, 00:00, 3 Years ago

1 Refresh WooCommerce product page on added to cart

Mon, May 25, 20, 00:00, 4 Years ago

1 How to pass data fetched in _app.js to a component

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 8 Years ago jeffery · Accepted Answer

Just tried updating jquery (to 3.1.0) & jquery-ui (to 1.12.0) and got the very same error.

Newer versions of jquery-ui seems to require a global jQuery variable to initialize or newer versions of jquery does not set the jQuery global variable by default anymore, hence the Uncaught ReferenceError.

A clear solution is to set global.jQuery = require('jquery') before importing jquery-ui.

It does not seem to work for browserify though, since browserify prioritizes imports over other expressions (imports are placed on top of the browserified code even if they were placed behind other expressions in the original code).

So if you're using browserify, try jquery@2.2.4 and jquery-ui@1.10.5, then import as:

import $ from 'jquery';

import 'jquery-ui';

Worked for me.