Webpack - ReferenceError: $ Is Not Defined

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 MiniCssExtr

Solution 1:

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

Solution 2:

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

Solution 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.