webpack-jquery-ui

2.0.1 verified Sat Apr 25 auth: no javascript maintenance

This package bundles jQuery UI (v1.12.1) with all necessary webpack loaders and plugins, simplifying configuration. Maintained as a convenience wrapper, it provides modular imports for interactions, widgets, and effects, automatically loading core dependencies. Version 2.0.1 is the latest; use is declining as modern frameworks adopt native solutions. Key differentiator: reduces boilerplate for webpack + jQuery UI projects.

Common errors

error Error: Cannot find module 'jquery' ↓

cause jquery not installed as a dependency

fix

Run 'npm install jquery' and add ProvidePlugin to webpack config.

error Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Missing style-loader or css-loader for CSS files

fix

Install 'npm install --save-dev style-loader css-loader' and add a rule for .css files in webpack config.

error $(...).datepicker is not a function ↓

cause jQuery UI not properly loaded or initialized after DOM ready

fix

Ensure you have require('webpack-jquery-ui') in your entry file and wrap code in $(function() { ... }) or DOMContentLoaded event.

Warnings

deprecated webpack-jquery-ui is not actively maintained; consider migrating to modern frameworks like React/Vue or using jQuery UI CDN directly. ↓

fix Evaluate alternative UI libraries or serve jQuery UI via script tags in HTML.

gotcha The package does not include jQuery itself; you must install jquery separately as a dependency. ↓

fix Run 'npm install jquery' and ensure ProvidePlugin aliases are set in webpack config.

gotcha Webpack 4+ requires style-loader and css-loader to be installed as dev dependencies; they are not automatically included by this package. ↓

fix Install 'npm install --save-dev style-loader css-loader file-loader'.

breaking jQuery UI v1.12.1 has known XSS vulnerabilities (CVE-2016-7103) in the dialog widget. ↓

fix Update to latest jQuery UI patch or sanitize user input manually.

Install

npm install webpack-jquery-ui

yarn add webpack-jquery-ui

pnpm add webpack-jquery-ui

Imports

webpack-jquery-ui
wrong
```
import jQueryUI from 'webpack-jquery-ui'
```
correct
```
import 'webpack-jquery-ui'
```
Default import is not supported; the entire module is side-effects only. Use bare import.
css
wrong
```
import css from 'webpack-jquery-ui/css'
```
correct
```
import 'webpack-jquery-ui/css'
```
CSS import similarly is a side-effect; default import will be undefined.

interactions

wrong

import { interactions } from 'webpack-jquery-ui'

correct

require('webpack-jquery-ui/interactions')

Named exports not available. Use CommonJS require with subpath.

Quickstart

Sets up full jQuery UI with webpack, including ProvidePlugin and CSS loading.

// install: npm install webpack-jquery-ui jquery
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|jpe?g|gif)$/i, use: 'file-loader' }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'window.$': 'jquery'
    })
  ]
};
// index.js
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
$(function() {
  $('#datepicker').datepicker();
});