0

Desired Behaviour

Include jQuery UI in webpack build.

Actual Behaviour

Error when running webpack:

ERROR in ./src/js/jquery-ui.js
Module not found: Error: Can't resolve
'jquery' in 'C:\Me\Documents\my_repo\src\js'

What I've Tried

I tried adding this to webpack.config.js but it didn't change anything:

plugins: [
   new UglifyJsPlugin(),
   new webpack.ProvidePlugin({
        $: "./jquery-3.3.1",
        jQuery: "./jquery-3.3.1",
        jquery: "./jquery-3.3.1"
    })
]

I also tried adding this to webpack.config.js (so that the path is relative to location of webpack.config.js) and that caused additional errors Module not found: Error: Can't resolve '/src/js/jquery-3.3.1':

plugins: [
   new UglifyJsPlugin(),
   new webpack.ProvidePlugin({
        $: "/src/js/jquery-3.3.1",
        jQuery: "/src/js/jquery-3.3.1",
        jquery: "/src/js/jquery-3.3.1"
    })
],

Steps To Replicate

1) Go to jQuery UI download builder
2) Select the following only and download the file:

-- Version 1.12.1
-- Effects > "Effects Core"
-- Effects > "Slide Effect"
-- Theme > "No Theme"

In the unzipped folder, get the jquery-ui.js file.

Note: I only need slide effect, not all of jQuery UI, hence the custom download.

my_entry_file.js

import './jquery-ui';

webpack.config.js

const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 

var webpack = require("webpack");

module.exports = {
    entry: "./src/js/my_entry_file.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist/js")
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "stage-0"]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.jpg$/,
                use: [
                    { loader: "url-loader" }
                ]
            },
            {
            test: path.resolve(__dirname, 'src/js/jquery-3.3.1'),
            use: [{
            loader: 'expose-loader',
            options: '$'
            }]
            }
        ]
    },
    plugins: [
       new UglifyJsPlugin(),
       new webpack.ProvidePlugin({
            $: "./jquery-3.3.1",
            jQuery: "./jquery-3.3.1"
        })
    ],
    resolve: {
    alias: {
        'uikit-util': path.resolve(__dirname, 'node_modules/uikit/src/js/util')
    }
    }
}
8
  • jquery-3.1.1 exists where the webpack config file is? Commented Jun 25, 2018 at 1:59
  • may want to try adding to ProvidePlugin: "window.jQuery": "jquery'", "window.$": "jquery" or possibly look at using: npmjs.com/package/webpack-jquery-ui Commented Jun 25, 2018 at 2:04
  • @MatheusSilva - jquery-3.1.1 exists in src/js which is where my_entry_file.js exists. Using the config file shown in original post, jQuery works fine. I am just trying to add jQuery UI as well. Thanks. Commented Jun 25, 2018 at 2:05
  • I'm not saying that it is not working, i'm just saying that ProvidePlugin is not being able to resolve jquery. Try adding the path from webpack config (where it is) to where jquery is. Are you getting what i'm saying? Commented Jun 25, 2018 at 2:14
  • Jquery-ui is not able to get jquery from the global scope, this means that jquery is not being resolved correctly on the provide plugin Commented Jun 25, 2018 at 2:14

1 Answer 1

1

I tried installing jquery with npm install jquery and changing webpack.config.js to:

plugins: [
   new UglifyJsPlugin(),
   new webpack.ProvidePlugin({
        $: "jquery",  
        jQuery: "jquery"
    })
],

and build completes and front end functionality is working.

So it seems it might have been related to user MatheusSilva's comment regarding path to jquery in webpack.ProvidePlugin.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.