Uncaught TypeError: Cannot read property 'replace' of undefined

Question

I have used this jquery script on many of my sites with the same theme, settings, etc.

It's in a wordpress Genesis Child theme.

On my current local build, however, when I click on an a href that has the class "scroll", I am getting a console error that reads:

Line 19 of my app.js is this code that I have never had an issue with before:

$(".scroll").click(function () {
        if (location.pathname.replace(/^\//, "") === this.pathname
            .replace(/^\//, '') && location.hostname === this.hostname
        ) {
            var target = $(this.hash);
            target = target.length ? target : $("[name=" + this
                .hash.slice(1) + "]");
            if (target.length) {
                $("html, body").animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });

I am running jQuery 3.3.1. I have commented out all code in the app.js to identify where the issue may be coming from. This code is right at the top and I have added console.logs all over the document, which show in Console.

What am I doing wrong here?

Thank you!

Answer 1

In WordPress jQuery is loaded in noConflict mode, it means that you need to use jQuery instead of the dollar sign $

You could wrap the code in an anonymous function (technically any IIFE) where you pass in jQuery to be mapped to $ and combine this with document ready, like this:

jQuery(document).ready(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);
});

You could also do it without document ready (not recommended):

(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);
})( jQuery );

See link for more explanation: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/