How do I solve this jQuery loading error in Smarty

Question

I have some on page script that produces a constant ReferenceError: $ is not defined error.

The jQuery is loaded at the bottom of the html page just before the tag. I have added a DOM listener so the code can wait for the JQuery load. Can you see anything wrong, code is bellow.

Webpack config:

new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })

console.log 1 works, console.log 2 doesn't

{literal}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {

    console.log('DOM loaded and parsed 1'); // Works!

        if ($('.add-user').length) {
            const addUser = (callbackFunction) => {
                const data = {
                    signup_name: $('#signup-name').val(),
                    user_name: $('#user-name').val(),
                };

                console.log(data);
                callbackFunction();
                return data;
            }
        }
        console.log('DOM fully loaded and parsed 2'); // Doesn't Work?
});
</script>
{/literal}

score 2 · Answer 1 · answered Nov 12 '19 at 14:10

Make sure you have added jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> This could be in the HEAD or in the footer of the page, just make sure you load it before you try to call any other jQuery stuff.

If it still gives you error, try to add var $ = jQuery. It should work fine.

score 0 · Answer 2 · answered Nov 12 '19 at 14:20

This isn't the solution but can help you determine if the problem is coming because jQuery hasn't yet loaded or not, if the second console log still doesn't show up then the problem is related to something else. I delayed the execution of the code by 5 seconds which is largely enough for jquery to load before your code gets executed

{literal}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {

    console.log('DOM loaded and parsed 1'); // Works!
    setTimeout(function(){
        if (jQuery('.add-user').length>0) {
            const addUser = (callbackFunction) => {
                const data = {
                    signup_name: jQuery('#signup-name').val(),
                    user_name: jQuery('#user-name').val(),
                };

                console.log(data);
                callbackFunction();
                return data;
            }
        }
        console.log('DOM fully loaded and parsed 2'); // Doesn't Work?
    },5000)
});
</script>
{/literal}

Thanks or the help! Now it says: `ReferenceError: jQuery is not defined ` I wonder if it is related to webpack and how JQuery is added! `new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })` — idm, Nov 12 '19 at 14:31

score 0 · Accepted Answer · answered Nov 12 '19 at 16:49

So it seems that jQuery is not available due to Webpack settings.

After some research i found an answer that helped solve the error:

https://stackoverflow.com/a/46937798/10814553

Install expose-loader: npm install expose-loader --save-dev

and add this to webpack.config.js

module: {
        rules: [            
             {
              // Exposes jQuery for use outside Webpack build
              test: require.resolve('jquery'),
              use: [{
                loader: 'expose-loader',
                options: 'jQuery'
              },{
                loader: 'expose-loader',
                options: '$'
              }]
            }
        ]
}

and make sure you also added the plugin

plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]

How do I solve this jQuery loading error in Smarty

3 Answers3