How to import jQuery UI using ES6/ES7 syntax?

Solution 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)

Solution 2:

I first,

npm install jquery-ui-bundle --save

When I need it, I

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

Solution 3:

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

Solution 4:

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