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!

Answer 1

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)

Answer 2

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

Answer 3

I first,

npm install jquery-ui-bundle --save

When I need it, I

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

Answer 4

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