webpack - ReferenceError: $ 未定义

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 ?

Answer 1

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

Answer 2

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 = $;

Answer 3

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.