“ReferenceError: jQuery is not defined” after deployment

  • mchalavon

    (@mchalavon)


    5 years, 1 month ago

    Hi,

    I updated a js script in a custom theme (I am a beginner in WP, so I did not develop it). Everything works fine on the development environment, but I have a problem when I deployed it: WP did not “reload” and minimize neiher the modified js script nor the modified css stylesheet and is not able to use JQuery anymore.

    After some research I found that the script and the css was directly inserted in header.php and footer.php (<script> and <link>) so I deleted these lines and re-implemented them with the wordpress “enqueue” functions in functions.php like this :

    define('CSSVERSION', 1.0);
define('SCRIPTVERSION', 1.0);

function load_custom_assets() {
    wp_enqueue_style('main-style', get_template_directory_uri().'/css/main-style.css', false, CSSVERSION, 'all');
    wp_enqueue_script( 'custom-front-script', get_template_directory_uri().'/js/custom-front-script.js', array('jquery'), SCRIPTVERSION, true );
}

add_action('wp_enqueue_scripts', 'load_custom_assets');

    It still works in development and now the css works in production (but not the script). There are errors in the console :
    – First the page can’t use JQuery “ReferenceError: jQuery is not defined”
    – There is a syntax error in a compiled/minimified file…
    – my “custom-front-script.js” because the window don’t know my “toggleAnimation” and I’m not able to locate the <script> that WP must generate.. I guess it’s because the page can’t use JQuery, so JQuery is never loaded, so “enqueue” can’t generate the script tag ?

    I can give you the URL, but the changes are visible only for logged admin…

    P.S :
    In header.php I have a script that call jquery, is that ok or must I remove it and use enqueue ?
    <script src="/acticontent/lib/jquery-3.1.1.min.js"></script>

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    5 years, 1 month ago

    1. You should use the jQuery that is bundled with WordPress.
    2. The jQuery bundled with WordPress is in no-conflict mode.

    When you enqueue scripts, the dependency parameter references the jQuery bundled with WordPress. If you also load another jQuery, that’s going to be trouble.
    no-conflict mode means that the $ is not defined, so you must either define it or use the jQuery name that is defined.

    WordPress does not “reload” or minify your scripts or CSS.

    Thread Starter mchalavon

    (@mchalavon)

    5 years, 1 month ago

    I misspoke, I should have said “update the cache” rather than “reload”
    After a few tries I done it works like this :
    1) function.php don’t load the script (only the css)

    define('CSSVERSION', 1.0);
function load_custom_assets() {
    wp_enqueue_style('main-style', get_template_directory_uri().'/css/main-style.css', false, CSSVERSION, 'all');
}

add_action('wp_enqueue_scripts', 'load_custom_assets');

    2) header.php includes jquery 3.1.1 in a <script> tag
    <script src="/acticontent/lib/jquery-3.1.1.min.js"></script>
    3) footer.php includes the JS script in a <script> tag just above the “wp_footer()”
    <script src="/wp-content/themes/mytheme/js/custom-front-script-28020191141.js"></script>

    I know it’s not good practice at all, but it’s waiting to solve my problem. I have to rename my script and update footer.php whenever I download them because of the cache. hat’s why I want to make it work with the WP fnctions
    (sorry for this long reply but I will explain everything I tried and the results)

    1) remove the JS include from footer.php and include it like my css in load_custom_assets() (below) ==> result = works in dev, not in prod ReferenceError: jQuery is not defined in http://www.actilan.fr:463:132
    SyntaxError: unexpected token: identifier in 9d759.js:21:114 

    define('CSSVERSION', 1.0);
define('SCRIPTVERSION', 0.1);
define('JSDIRECTORY', get_template_directory_uri().'/js/');

function load_custom_assets() {
    // CSS
    wp_enqueue_style('main-style', get_template_directory_uri().'/css/main-style.css', false, CSSVERSION, 'all');

    // JS
    wp_register_script('custom-front-script', JSDIRECTORY.'custom-front-script.js', array('jquery'), SCRIPTVERSION, true);
    wp_enqueue_script('custom-front-script');
}

    2) remove the JQuery include from header.php to use the “standard WordPress JQuery”
    result = error in development and prod
    TypeError: $ is undefined in custom-front-script.js:8:1
    TypeError: $ is not a function in highcharts.js:9:1

    3) update the JQuery version at the beginning of my function load_custom_assets()
    result = same errors

    function load_custom_assets() {
    // replace standard JQery
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', content_url().'/lib/jquery-3.1.1.min.js', array(), '3.1.1' );

    // CSS
    //echo("CSS=".get_template_directory_uri().'/css/main-style.css');
    wp_enqueue_style('main-style', get_template_directory_uri().'/css/main-style.css', false, CSSVERSION, 'all');

    // JS
    wp_register_script('custom-front-script', JSDIRECTORY.'custom-front-script.js', array('jquery'), SCRIPTVERSION, true);
    wp_enqueue_script('custom-front-script');
}

    add_action(‘wp_enqueue_scripts’, ‘load_custom_assets’);`
    <strong>result = works in dev, not in prod</strong>
    ReferenceError: jQuery is not defined[En savoir plus] http://www.actilan.fr:463:132
    SyntaxError: unexpected token: identifier[En savoir plus] 9d759.js:21:114
    <strong>4) Keep both Jquery version :</strong> adding the 3.1.1 with php and use it as dependencies

    define('CSSVERSION', 1.0);
define('SCRIPTVERSION', 0.1);
define('JSDIRECTORY', get_template_directory_uri().'/js/');
function load_custom_assets() {
    // add new JQuery Library
    wp_register_script('newjquery', content_url().'/lib/jquery-3.1.1.min.js', false, '3.1.1');

    // CSS
    wp_enqueue_style('main-style', get_template_directory_uri().'/css/main-style.css', false, CSSVERSION, 'all');

    // JS
    wp_register_script('custom-front-script', JSDIRECTORY.'custom-front-script.js', array('newjquery'), SCRIPTVERSION, true);
    wp_enqueue_script('custom-front-script');
}

add_action('wp_enqueue_scripts', 'load_custom_assets');

    Why does it work in development and not in production? Is there a parameter or wp-config that can cause this problem?

    • This reply was modified 5 years, 1 month ago by mchalavon.
    • This reply was modified 5 years, 1 month ago by mchalavon.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘“ReferenceError: jQuery is not defined” after deployment’ is closed to new replies.