webpack - ReferenceError: $ is not defined

Question

I've read many answers to this question but I can't get to resolve my issue so I come here for help...

Here's my webpack conf file :

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// https://github.com/webpack-contrib/mini-css-extract-plugin
const webpack = require('webpack');
const jquery = require('jquery');

module.exports = {
    mode: 'development',
    entry: './assets/js/app.js',
    output: {
        path: path.resolve(__dirname, 'public/dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 100000,
                        },
                    },
                    {
                        loader:"file-loader",
                        options:{
                            name:'[name].[ext]',
                            outputPath:'images/' //the images will be emited to dist/images/ folder
                        }
                    }
                ],
            },
            {
                // Exposes jQuery for use outside Webpack build
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name]-[id].css',
            ignoreOrder: false,
        }),
        /* Use the ProvidePlugin constructor to inject jquery implicit globals */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery'",
            "window.$": "jquery"
        })
    ],
    /*resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }*/
};

And my entry file app.js :

// Import CSS
import 'bootstrap/dist/css/bootstrap.css';
import '@fortawesome/fontawesome-free/js/all';
import '../css/style.css';

// Import JS
import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

import * as JSZip from 'jszip'; //export xlsx

import 'bootstrap';

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

I keep on trying different solution but still when I use jQuery in my code I get :

ReferenceError: $ is not defined

Could you please help me out ?

I'm using jQuery in my view, is it a mistake ? Am I suppose to use it only in the js files I've declared in the webpack conf as entry ? — JGL, Mar 05 '20 at 16:41

Grzegorz T. · Answer 1 · 2020-03-06T11:35:19.263

One solution to add the jquery library as external. The second solution is to add jquery to the bundle.

1. External webpack.js

externals: {   
  jquery: 'jQuery'
}
plugins: [   new webpack.ProvidePlugin({      
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'    
})]

adding jquery to html

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">

adding jquery in js

import $ from 'jquery';

const test = $('h1').text();
console.log(`from jquery: $ {test}`);

2. The second solution, adding jquery to the bundle First you need to install jquery locally.

yarn add -D jquery

adding jquery in js

import $ from 'jquery';

const test = $('h1').text();
console.log(`from jquery: $ {test}`);

This can be optimized and split using splitChunks but that's a story for another entry;)

I added an example of external jquery use

So I have to add jQuery in the view in order to use it there ? — JGL, Mar 06 '20 at 08:51
Yes, if you want to use the external jquery library, see my first example. It's best to see the example that I linked to. — Grzegorz T., Mar 06 '20 at 11:37

connexo · Answer 2 · 2020-03-05T20:39:05.710

0

Look at this in your code:

import $ from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

Think a second.

.

Notice you never defined jQuery. Fix it.

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

edited Mar 05 '20 at 20:39

answered Mar 05 '20 at 18:40

connexo

53,704
14
91
128

score 0 · Accepted Answer · edited Jul 30 '21 at 07:14

0

OK the mistake was stupid, app.js was called at the end of the layout and I was trying to use jQuery in the view.

So make sure that you check the order in which your broken code and the include which contains jquery is called.

edited Jul 30 '21 at 07:14

Ron

22,128
31
108
206

answered Mar 20 '20 at 14:30

JGL

766
1
7
16

this was actually my problem... haha, thx for the hint. – Ron Jul 30 '21 at 07:14

webpack - ReferenceError: $ is not defined

3 Answers3

Linked