Question 165237 in Wordpress Question posted in
The official Wordpress documentation can be found here.

“Is ‘$’ already declared in WordPress Uncaught SyntaxError?”

I am getting the following error in my JQuery code on a WordPress site.

Uncaught SyntaxError: Identifier '$' has already been declared

Background

In WordPress, sometimes the $ identifier has not been defined as jQuery. So, you have to manually set $ equal to jQuery so you can use $ as shorthand in your code.

I added the simple code var $ = jQuery; to the top of my script, and that fixed the problem initially. However, recently I’ve been getting the has already been declared error shown above. Based on some Googling, I’ve tried a lot of things, and came up with the following code to try to catch this problem. But I still get the same error. The try...catch isn’t helping at all, nor is the if typeof...

try {
  if (typeof $ !== 'undefined') {
    console.log("$ is already defined");
  } else {
    console.log("$ is not defined");
    var $ = jQuery;
  }
}
catch(err) {
  console.log("Error caught: " +  err.message);
}

Disclaimers

I know the cause of this issue. Some previous script has already declared the variable $ in the global window context. It is likely a plugin that is doing this. However, I can’t guarantee that it will always be properly declared, so I can’t just remove my declaration. Also, since this is a syntax error, I’m guessing that my try...catch and my if typeof... are basically useless.

What I Need

I’m looking for a way to check if $ is already declared, and then declare it only if it isn’t already declared.
I know, this is bad coding style, but unfortunately this is WordPress and I don’t have control over the entire code base. Another plugin may or may not have declared it, and that’s the situation I’m in. I’d apprecaiate an answer if anyone knows!

Tags:

2

Answers


  1. 0

    If try...catch instruction doesn’t return demanded value (whether it’s an error or a assignment), it means that you are expecting it’s call after the process has stopped.

    You must place your script on top of your scripts in section.
    I believe that the shortest way to do so is by using the Theme Editor plugin.

    Your way of checking $ is okay. You could use instanceof operator to make sure it’s instance of a function. I strongly suggest to do that at top of everything.

    Login or Signup to reply.
  2. 0

    "unfortunately this is WordPress and I don’t have control over the entire code base."

    Ummm, this is a bold claim and i don’t think it’s necessarily true!

    Having said that, what you asked for, in the "What I Need" section of your question is going to make your life harder down the road and it’s not recommended. if you think $ from jquery is in conflict with $ from other javascript libraries, then use the following workflow in your wordpress project:

    1. Make sure that jquery is actually being loaded onto your page by (code goes into the functions.php file of your active theme):
    add_action('wp_enqueue_scripts', 'your_theme_files');

function your_theme_files()
{
  wp_enqueue_script('jquery');
}
    1. As @isherwood suggested in the comments, wrap your jquery code into the following syntax to make sure $ being used is actually the $ from jquery:
    jQuery(document).ready( $ => {

  // WRITE YOUR JQUERY CODE HERE!

});

    By using the workflow i just mentioned:

    1. Your code is going to be easier to read and maintain.
    2. There won’t be any conflicts between $ signs from different libraries.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search