Webpack Encore jQuery not defined

Yeap, jQuery is still relevant in some cases and within WebPack, it causes a bit of an issue when being imported. The reason, in most cases, is jQuery being defined as $ and not as jQuery. Depending on how your jQuery specific code was written, it could render it not working. Let’s look at it progressively,

This is probably how you included jQuery in your app.js file. The only problem is, this however doesn’t declare jquery as a global $ or jQuery. And you end up with something like the following,

The solutions also depend on the use case,

Expecting jQuery to be Global

If you are using a plugin that expects jQuery to be global via $ or jQuery, your best bet is to add autoProvidejQuery() to your encore webpack.config.js file.

Be advised, don’t use .autoProvideVariables(), they are the same. autoProvidejQuery() is working on top of it, just for jQuery.

What about Embedded Scripts?

Your page might have a few Embedded scripts that require jQuery. In cases like that, one simple line should fix your issue, Go Global.

On your app.js file, add this after you have included your jquery.

 

That’s it!

If you are using Symfony ( you should ), take a look here # https://symfony.com/doc/current/frontend/encore/legacy-applications.html 

 

I was working on a project of mine, a WordPress theme. I was working with a loop to display most viewed post of the site. Well, the loop was working. Thumbnail, not so much. It kept repeating the thumbnail from the first post of the loop, through all the post. It’s not only frustrating, annoying too. I spend about 2 days fixing it, nothing. All WP functions related to thumbnail , tried and failed. So when I was about to give up and put a plugin to solve this shit, I suddenly realise, the thumbnail has no reason to work. I have to call the post before I can fetch its thumbnail. I was so busy fetching everything else, I forgot about the_post(); function. Shame on me!

A different approach to Bootstrap Alert

A Different approach to Bootstrap Notificaion

I was working on a project, where I had to design a login panel. It had two columns, one for Login and one for registration. Now the problem was, when I made the initial commit to git, I forgot to insert an alert notification. I have to show some error when someone use wrong username password or missed a field in the registration form, or the username he is trying to get is already registered. That sort of stuff.

Now as I was using bootstrap, I can simply use the bootstrap alert. All I needed to do is insert the HTML code. But that I thought, why not a different approach? Especially I loved the alert UI of WordPress admin panel. So I figured, let’s shake some code ( not booty ).

I was about to write the whole thing here, but a friend suggested that I should circulate it to a broad network. And my first choice was Bootsnip. Probably the largest collection of bootstrap snippets. Helping me in my work for more than a year. So i put it there.