jquery-ui and webpack, how to manage it into module?
Jquery UiWebpackJquery Ui Problem Overview
any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don't know how to manage that , any idea ?
Jquery Ui Solutions
Solution 1 - Jquery Ui
jquery-ui-dist
and jquery-ui-bundle
do not seem to be maintained by the jquery-ui team. After jquery-ui v1.12 Its possible to use the official jquery-ui
package from npm with webpack.
Update jquery-ui to 1.12 by updating package.json
and npm install
.
Then you can require
each widget like this.
require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");
If you have used require("jquery-ui")
before you need to replace it with separate imports for each widget. I think the new way is better because it will bundle only the code for the widget we need to use.
See documentation on using the 1.12 official npm package.
Solution 2 - Jquery Ui
For some reason jquery-ui
didn't play nice with webpack. I had to require jquery-ui-bundle
instead.
npm i -S jquery-ui-bundle
and then require it after jquery e.g.
require('jquery');
require('jquery-ui-bundle');
Solution 3 - Jquery Ui
youre in luck I did this just that yesterday, it's rather easy.
npm install --save jquery jquery-ui
Make sure that you have jquery aliased to resolve with the plugin in the webpack.config.js
...
plugins: [
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
}),
...
Then include two aliases in the webpack.config.js
- The node_modules folder
- The jquery-ui folder
resolve : {
alias: {
// bind version of jquery-ui
"jquery-ui": "jquery-ui/jquery-ui.js",
// bind to modules;
modules: path.join(__dirname, "node_modules"),
Make sure that jquery gets loaded first in your app startup file.
var $ = require("jquery"),
require("jquery-ui");
If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(jpe?g|png|gif)$/i, loader:"file" },
And use in your app startup file.
require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");
Solution 4 - Jquery Ui
webpack-jquery-ui
[webpack-jquery-ui][1] [1]: https://www.npmjs.com/package/webpack-jquery-ui
-
use this plugin, e.g. if you use Rails 5, run
yarn add webpack-jquery-ui
When jQuery UI plugin starts, it checks if jquery provided, so
Add this code to your webpacker configuration file (shared.js - if you use it with Rails 5)
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery'",
"window.$": "jquery"
})
]
Add these lines into your app code.
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
to fix ActionController::InvalidAuthenticityToken
in jquery.ajax
You have to pass an authenticity_token
parameter with all your PUT
, POST
and DELETE
requests.
To do that you can usually fetch it from the header with $('[name="csrf-token"]')[0].content
So your request would look something like:
var that = this;
$.ajax({
url: navigator_item.url,
data: { authenticity_token: $('[name="csrf-token"]')[0].content},
method: 'DELETE',
success: function(res) {
...
}
});
I include jQuery into my application in another way
Instead of using:
plugins: [
new webpack.ProvidePlugin({...
You should add 'jquery': 'jquery/src/jquery' to aliases in the webpack config file:
module.exports = {
resolve: {
alias: {
'jquery': 'jquery/src/jquery'
}
}
It will provide module name 'jquery'. jQuery UI checks this name on init.
Then in you app.js file you write:
import $ from 'jquery'
import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.
window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.
Solution 5 - Jquery Ui
The accepted answer doesn't work for me as the jQuery-ui package on NPM isn't pre-built and therefore doesn't contain jquery-ui.js
; the package will either need built before use or all the widgets included/used individually.
Quickest way I got the whole package working was by first downloading the distributable version:
npm install jquery-ui-dist --save
I needed to add an alias for jquery-ui-dist
to avoid a 'Cannot find module' error (using just require('jquery-ui-dist')
won't work, because the .js filename is different), by adding this to webpack.config.js
:
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
},
Finally, you can use this in the .js file where the modules are loaded:
var jQuery = require('jquery');
require('jquery-ui');
Alternatively, you can avoid having to require
the scripts when loading the modules, and having to declare jQuery as a variable, by using ProvidePlugin in your webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
'jQuery': 'jquery',
'$': 'jquery',
'global.jQuery': 'jquery'
})
],
Solution 6 - Jquery Ui
The steps that worked for me (in a Rails 5.1.6 project) aren't identical to any of the above:
Install jquery and jquery-ui: yarn add jquery
and yarn add jquery-ui
Add the following to the webpack config (i.e. in /config/webpack/environment.js
) to globally set $ and jquery and jQuery:
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
Require whichever individual jquery-ui package(s) you want, at the top of your pack (e.g at the top of /javascript/packs/application.js
:
require("jquery-ui/ui/widgets/sortable")
Then you can call, for example, $('.selector').sortable()
anywhere in your pack.
Solution 7 - Jquery Ui
add jquery in your node_modules using;
npm install --save jquery jquery-ui
and add externals in your webpack.config.js like;
...
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js",
}
it worked for me
Solution 8 - Jquery Ui
You should import all of these and check which ones you really need.
require('jquery-ui/ui/core.js');
require('jquery-ui/ui/data.js');
require('jquery-ui/ui/form.js');
require('jquery-ui/ui/form-reset-mixin.js');
require('jquery-ui/ui/focusable.js');
require('jquery-ui/ui/disable-selection.js');
require('jquery-ui/ui/plugin.js');
require('jquery-ui/ui/labels.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/scroll-parent.js');
require('jquery-ui/ui/tabbable.js');
require('jquery-ui/ui/unique-id.js');
require('jquery-ui/ui/widget.js');
require('jquery-ui/ui/widgets/accordion.js');
require('jquery-ui/ui/widgets/autocomplete.js');
require('jquery-ui/ui/widgets/button.js');
require('jquery-ui/ui/widgets/checkboxradio.js');
require('jquery-ui/ui/widgets/controlgroup.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/draggable.js');
require('jquery-ui/ui/widgets/droppable.js');
require('jquery-ui/ui/widgets/menu.js');
require('jquery-ui/ui/widgets/mouse.js');
require('jquery-ui/ui/widgets/progressbar.js');
require('jquery-ui/ui/widgets/resizable.js');
require('jquery-ui/ui/widgets/selectable.js');
require('jquery-ui/ui/widgets/selectmenu.js');
require('jquery-ui/ui/widgets/slider.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/spinner.js');
require('jquery-ui/ui/widgets/tabs.js');
require('jquery-ui/ui/widgets/tooltip.js');
require('jquery-ui/ui/effect.js');
require('jquery-ui/ui/effects/effect-blind.js');
require('jquery-ui/ui/effects/effect-bounce.js');
require('jquery-ui/ui/effects/effect-clip.js');
require('jquery-ui/ui/effects/effect-drop.js');
require('jquery-ui/ui/effects/effect-explode.js');
require('jquery-ui/ui/effects/effect-fade.js');
require('jquery-ui/ui/effects/effect-fold.js');
require('jquery-ui/ui/effects/effect-highlight.js');
require('jquery-ui/ui/effects/effect-puff.js');
require('jquery-ui/ui/effects/effect-pulsate.js');
require('jquery-ui/ui/effects/effect-scale.js');
require('jquery-ui/ui/effects/effect-shake.js');
require('jquery-ui/ui/effects/effect-size.js');
require('jquery-ui/ui/effects/effect-slide.js');
require('jquery-ui/ui/effects/effect-transfer.js');
require('jquery-ui/ui/vendor/jquery-color/jquery.color.js');