CODEWITHSUNDEEP
javascriptnode.jsjquery-uiwebpack
goose
goose

Reputation: 2660

Unable to build jQuery ui with webpack

I'm unable to successfully include jQuery UI in my project using webpack. jQuery has been working, but when I visit a page of my app that requires jQuery-UI I get the following warning:

jQuery.Deferred exception: $(...).draggable is not a function TypeError: $(...).draggable is not a function

And error:

jquery.js:4055 Uncaught TypeError: $(...).draggable is not a function

I'm nearly brand new to building javascript code using webpack/node, so it's very possible I've made a naive mistake.

This is my config file:

config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');


module.exports = {
    entry: './src/js/index.js',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: 'path/js',
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
              },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/index.css',
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        })
    ],
    resolve : {
        alias: {
            // bind version of jquery-ui
            "jquery-ui": "jquery-ui/jquery-ui.js",
            // bind to modules;
            modules: path.join(__dirname, "node_modules"),
        }
    },
}

My entrypoint:

index.js

import '../sass/index.scss';
const $ = require("jquery");
require('webpack-jquery-ui');
require('webpack-jquery-ui/draggable');
global.$ = global.jQuery = $;
import 'bootstrap';

Each time I make a change I run the command:

npx webpack --config config.js

There are no errors output from this.

Where am I going wrong?

Update Upon Chris G suggestion in comments I've tried the following:

import '../sass/index.scss';
const $ = require('webpack-jquery-ui');
global.$ = global.jQuery = $;
import 'bootstrap';

Upon rebuilding I get a series of errors in the console such as:

ERROR in (webpack)-jquery-ui/index.js
Module not found: Error: Can't resolve 'jquery- 
ui/themes/base/autocomplete.css' in 
'.../webpack/node_modules/webpack-jquery-ui'
@ (webpack)-jquery-ui/index.js 57:0-49
@ ./src/js/index.js

This is what's returned when running "npm install --save jquery jquery-ui"

npm WARN saveError ENOENT: no such file or directory, open '.../webpack/package.json' npm WARN enoent ENOENT: no such file or directory, open '.../webpack/package.json' npm WARN webpack No description npm WARN webpack No repository field. npm WARN webpack No README data npm WARN webpack No license field.

Could this now be an install problem?

Upvotes: 0

Views: 1851

Answers (1)

tmhao2005
tmhao2005

Reputation: 17524

From my understanding, there are couple of things you need to do:

  • All you need to do is to only install webpack-jquery-ui.

  • I don't think you should are now resolving the correct jquery-ui in your webpack.config.js, just remove that alias of "jquery-ui"

resolve: {
  alias: {
    // bind to modules;
    modules: path.join(__dirname, "node_modules"),
  }
},
  • Finally, I don't think webpack-jquery-ui exports a jquery object for you so don't assign and export it in global anymore since it's currently available in your module with ProvidePlugin. So just simply write like following:
import '../sass/index.scss';

require('webpack-jquery-ui');
require('webpack-jquery-ui/draggable');

// $ is available in the module via `ProvidePlugin`
global.$ = global.jQuery = $;
import 'bootstrap';

Upvotes: 1

Related Questions