How to import jQuery UI using ES6/ES7 syntax?

Question

I am trying to use some jQuery UI functionality in my reactJS/Redux application. I've imported both jQuery and jQuery UI using:

npm install jquery jquery-ui

And then I've tried:

import $ from 'jquery';
import jQuery from 'query';
import jQuery-ui from 'jquery-ui';

However jQuery UI does not seem to be imported when I try to do something like:

componentDidMount() {
  $('ol#myList').selectable();
}

I believe the issue is with jQuery UI. What am I doing wrong? How can I get jQuery UI to work with this stack?

Thank you!

for starters, what do you mean by "doesn't work"? Where are you writing that line? It's likely the element isn't initialized yet so you should be using the `componentDidMount` callback — ZekeDroid, Feb 07 '16 at 22:22
@ZekeDroid Sorry, it was in `componentDidMount()`, I edited my question. — Leopold Joy, Feb 07 '16 at 22:25
@AlexPalcuie Please see my edits, I believe the issue is with jQuery UI, the `selectable()` function doesn't seem to work. — Leopold Joy, Feb 07 '16 at 22:27
*"doesn't seem to work"* is not a proper problem description that anyone can troubleshoot from — charlietfl, Feb 07 '16 at 22:28
Again, what makes you think the issue is with jquery. Could you please please try giving us some console.logs? Do you get an error? Does nothing happen? what's expected? what went wrong? — ZekeDroid, Feb 08 '16 at 08:23
you could try to `cnosole.log($.fn.selectable)` and see if it's underfined to ensure that it's not loading the jQuery UI — Tian Chen, Mar 21 '16 at 21:54

basil · Answer 1 · 2016-08-13T06:02:41.160

64

I'm successfully using partial import from jquery-ui. I mean import to my module only what I needed from jquery-ui:

import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/selectable';

( But take in account that I'm using webpack https://webpack.github.io/, in other environment approach may differ)

edited Aug 13 '16 at 06:02

answered Aug 04 '16 at 00:00

basil

3,482
2
22
20

Using SystemJS/jspm, this approach works for me but requires adding '!' to the end of the css imports, e.g. `import 'jquery-ui/themes/base/core.css!'` – greenlaw Feb 23 '17 at 05:49
Could you share your webpack.conf with us? I tried that with autocomplete `import 'jquery-ui/ui/widgets/autocomplete';` and got `(0 , _jQuery2.default)(...).autocomplete is not a` in my browser. Also, webpack tells me a warning that there are multiple modules with names that only differ in casing. – muuvmuuv Jul 03 '18 at 09:02
Thank you, this is the answer, import core and then the widget you need! @muuvmuuv for me that is exactly what i did and does work : import 'jquery-ui/ui/core'; import 'jquery-ui/ui/widgets/autocomplete'; – Samantha Adrichem Jun 21 '19 at 12:32
when using jquery-ui with webpack, any idea why it's not possible to import global functions like Sine, Circ, Elastic, Back, Bounce https://github.com/jquery/jquery-ui/blob/master/ui/effect.js#L932 ?? when I try to import, these functions are always undefined. I've tried different ways `import {Sine} from 'jquery-ui'` or `import {Sine} from 'jquery-ui/ui/effect'` - it is undefined in either case. I'm disappointed. Please advise. – Semen Shekhovtsov Jun 26 '20 at 07:21
@SemenShekhovtsov, try `import jquery_ui from 'jquery-ui'; console.log(jquery_ui.Sine); ` – basil Jul 20 '20 at 08:32
1

Depending on the version of jQuery, it might be just `import 'jquery-ui/selectable';`. Check exact path in `node_modules/jquery-ui`. Otherwise great answer, thanks. – Victor Zakharov Jun 29 '21 at 16:28
If you're using webpack, consider using `webpack-jquery-ui` – Ringo Jul 08 '21 at 03:39

score 17 · Answer 2 · answered Jun 12 '17 at 20:57

17

I first,

npm install jquery-ui-bundle --save

When I need it, I

import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';

answered Jun 12 '17 at 20:57

Morio

8,463
5
25
29

2

Just to clarify `--save` includes the library since it is not being manually edited. If you need to modify anything with custom code you'd use `--save-dev` – Callat Jan 30 '18 at 20:48
"Bundle" means ready for webpack or other bundle tools. Right? Anyway, this works for me. – Vladimír Mlázovský Apr 12 '23 at 13:48

score 14 · Answer 3 · answered Mar 29 '17 at 02:42

14

Add a alias in webpack config:

resolve: {
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  }
}

Save them in package.json:

npm i --save jquery
npm i --save jquery-ui-dist

Then

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

It work for me with the last jquery(3.2.1) and jquery-ui(1.12.1).

See my blog for detail: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

answered Mar 29 '17 at 02:42

cwtuan

1,718
1
18
20

2

I can't even begin to understand why they would have `jquery-ui` and `jquery-ui-dist` packages. I wasted so much time on this. Thanks for adding this answer! – tftd Mar 25 '19 at 20:58
3

Thanks, this was helpful. I think you can skip the `resolve` stage if you replace the last line with: `import 'jquery-ui-dist/jquery-ui;` – haz Aug 13 '19 at 04:39
@haz - you often have to change your jquery build. Pulling the entire jQuery lib in everytime is very taxing. I can't recommend enough, using the `resolve` feature. Otherwise you're hardcoding a specific dist into your code, that will probably change. – Jamie Marshall Feb 26 '21 at 18:09
Well, not precisely. Skipping the `resolve` step gives up some syntactic sugar, but not much in this instance. In either case, it will still look for the version of JQuery as handled by `npm` and your `package.json` file and contained in your `node_modules` directory. This will update to the most recent, whenever you do `npm update`. – haz Mar 03 '21 at 02:25

score 5 · Answer 4 · answered Feb 08 '16 at 05:50

5

component name is jqueryui (no hyphen), use import jqueryui from 'jquery-ui' or simply import 'jquery-ui'

answered Feb 08 '16 at 05:50

Alfiyum

361
2
7

When I try this, I get this error when I try to run: `can't execute file: /pathToRoot/bin/server.js error given was: TypeError: Object function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); } has no method 'extend' at uuid (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:15:3) at Object. (/pathToRoot/node_modules/jquery-ui/jquery-ui.js:316:3) at Module._compile (module.js:456:26) at Module._extensions..js (module.js:474:10) (**See next comment for rest**) – Leopold Joy Feb 08 '16 at 18:11
1

at require.extensions.(anonymous function) (/pathToRoot/node_modules/babel-core/lib/api/register/node.js:214:7) at Object._module3.default._extensions.(anonymous function) [as .js] (/pathToRoot/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:250:71) at Module.load (module.js:356:32) at Module._load (module.js:312:12) at Function.module._load (/pathToRoot/node_modules/piping/lib/launcher.js:32:16) at Module.require (module.js:364:17)` – Leopold Joy Feb 08 '16 at 18:11
It'd be helpful if you can share a simple project with minimal dependencies to reproduce the issue. – Alfiyum Feb 08 '16 at 21:35
import jqueryui from 'jquery-ui' didn't work for me, but import 'jquery-ui' did – Lamari Alaa Jul 29 '16 at 09:48

score 0 · Answer 5 · answered Sep 15 '20 at 10:25

0

Selectable is a plugin in JQuery UI. So we need to improt exact plugin from it. If you need selectable, then it would be like:

import 'jquery-ui/ui/widgets/selectable'

answered Sep 15 '20 at 10:25

Rahul TP

536
5
9

How to import jQuery UI using ES6/ES7 syntax?

5 Answers5

Linked