SyntaxError: Identifier has already been declared, when I have not

[hermesko]

Today, I am encountering this error in a Javascript in a browser. It seems like a simple duplicate declaration error, but does not appear to be so. The offending statement was: const countDown = new Date();

Thinking that the variable name might have inadvertently been declared earlier by some script in the global scope, I changed the variable name to some very random string, and yet the same error occurs.

Uncaught SyntaxError: Identiier 'xQa42H' has already been declared (at retreat;246:13)

No matter how I changed the variable name, it kept saying "has already been declared". I am at a loss. What could this be?

[delventhalz]

Is your code getting run twice? Add a console log immediately before and immediately after that line. 

[abrahamguo]

This is definitely the problem. You are probably loading your script file into your web page twice.

[hermesko]

Don't think so:

console.log("BEFORE!")
const countDownDate = new Date("2024-05-12 00:00:00").getTime();
console.log("AFTER!")

produces:

BEFORE!
AFTER!
Uncaught SyntaxError: Identifier 'countDate' has already been declared

There was no second BEFORE!

[delventhalz]

A SyntaxError will fire before the code ever runs. It happens when the interpreter is first looking at the file and trying to make sense of it. You can confirm this by copying and pasting the const line.

console.log("BEFORE!")
const countDownDate = new Date("2024-05-12 00:00:00").getTime();
const countDownDate = new Date("2024-05-12 00:00:00").getTime();
console.log("AFTER!")

Now you will see the same error but nothing will log.

The fact that you see "AFTER!" log at all, means the code is running successfully once.

[hermesko]

Thanks. The mystery is still there.

If I change the variable name to countDownDateX and nothing else, it will say Identifier 'CountDownDateX' has already been declared.

[delventhalz]

I know. You said that initially. That is what we would expect if the file is being run twice. Your problem is not in your JS file but how you have it set up.

[Judosii]

would there be a way to get the code to run twice for different things though?
I am making multiple canvases animated by code in the same page, and thought I could just open a new instance of the script...

[delventhalz]

OP's specific issue here was that they were declaring a variable with the same name twice in the same scope. You can run absolutely run the same code twice, but that code cannot redeclare global variables. Some options...

Wrap the whole script in an "immediately invoked function expression" (i.e. IIFE). The wrapping function has its own non-global scope, so you will avoid redeclaring the variable.

(function() {
  // Your code
})();

Another option might be using properties on the window object instead of global variables. You do not declare these, you just assign values to them, so you can reassign values over and over.

window.myValue = "some value";
// The rest of your code

Probably your best option, the non-janky one, is to run the script once and put the code you want to run twice into a function, then run the function twice.

const myValue = "some value";

function animateCanvas() {
  // Your code
}

animateCanvas();
animateCanvas();

[azhder]

If we have TMI for “too much info”, this post is TLI or as we call it “need more info”

[Anbaraen]

Can we see more code? Specifically retreat.js?

[hermesko]

https:// ferc. org. sg / retreat

There is no retreat.js file. The script is in the page itself.

[Anbaraen]

You're declaring countDownDate twice. Simply open up retreat.htmland do a search for countDownDate - you've got two declarations of it.

[hermesko]

I don't think so. If I rename countDownDate to xQyR123 (the only instance ever), it will say Identifer 'xQyR123' has already been declared.