Hello everyone,
The following problem has been discussed many times over the years, but I haven’t found a proper solution yet.
I think the minify CSS and JS are great!
With CSS there are actually never any problems when exporting.
But probably with JS.
My problem, I don’t really know much about JS.
Sometimes the export works perfectly with Minify… and then again it doesn’t.
How can I isolate the error? Do the scripts have to have a certain format or how do you solve the whole thing?
What are your experiences…
Sure, it’s not really necessary to minify, but I would like it… a clean source code…
If you are using more than one js-file
Example 1: const
is scoped
script1.js
document.addEventListener('DOMContentLoaded', function () {
const helloWorld = 'Hello World';
console.log(helloWorld); // output: Hello World
});
script2.js
document.addEventListener('DOMContentLoaded', function () {
const helloWorld = 'Hello World';
console.log(helloWorld); // output: Hello World
});
Example 2: const
is not scoped
script1.js
const helloWorld = 'Hello World';
console.log(helloWorld); // output: Hello World
script2.js
const helloWorld = 'Hello World';
console.log(helloWorld); // output:TypeError: helloWorld is already declared
Explanation:
- In this example,
script1.js
and script2.js
are not wrapped in event listeners, but they are executed in the global scope of the HTML page.
- Both scripts declare a constant helloWorld using const.
- Unlike in Example 1 where each const declaration was scoped to its respective function block, in the global scope (outside of any function), const declarations are not re-declarable. This means you cannot redeclare a const variable with the same name in the same scope.
- Hence, when script2.js tries to declare const helloWorld after it has already been declared in script1.js, it causes a TypeError because helloWorld has already been defined in the global scope by
script1.js
.
- This behavior demonstrates that const declarations are block-scoped within functions but not re-declarable within the same scope in the global context.
When Example 2 minify the two js-files into one you will get the TypeError: helloWorld is already declared and the minified script will not work
Example without Guard Clause
// Attempting to add event listener without a guard clause
// HTML element that doesn't exist initially
const nonExistentButton = document.getElementById('nonExistentButton');
// Trying to add an event listener without checking if element exists
nonExistentButton.addEventListener('click', function () {
console.log('Button clicked!');
});
Explanation:
- In this example,
nonExistentButton
is assigned the value null
because getElementById('nonExistentButton')
did not find any element with the ID nonExistentButton
in the initial DOM.
- When we attempt to call addEventListener on nonExistentButton, which is null, it results in a TypeError because null does not have a method addEventListener.
- This can cause your script to break, and further code execution might stop if not handled properly.
Example with Guard Clause
// Adding event listener with a guard clause
// HTML element that doesn't exist initially
const nonExistentButton = document.getElementById('nonExistentButton');
// Adding event listener with guard clause
if (nonExistentButton) {
nonExistentButton.addEventListener('click', function () {
console.log('Button clicked!');
});
} else {
console.log('Element with id "nonExistentButton" not found.');
}
Explanation:
- In this example, before attempting to add an event listener, we first check if
nonExistentButton
is not null
.
- If
nonExistentButton
is null
(i.e., the element with ID nonExistentButton
does not exist in the DOM), the script logs a message indicating that the element was not found.
- If
nonExistentButton
is not null
, the event listener is added to it, allowing the button (if it exists later in the DOM) to respond to clicks as intended.
Benefits of Using a Guard Clause:
- Prevents Errors: Using a guard clause prevents potential errors like
TypeError
that could occur when trying to call methods on non-existent elements.
- Graceful Handling: Instead of crashing or throwing an error, the script gracefully handles the scenario where the element doesn’t exist by logging a message or taking other appropriate actions.
- Maintains Script Execution: By checking existence before proceeding with operations like adding event listeners, the rest of the script can continue to execute without interruptions caused by unexpected errors.
In practice, using guard clauses or conditional checks before interacting with potentially non-existent DOM elements is a good practice to ensure your JavaScript code is robust and resilient to dynamic changes in the DOM.
hope this helps

OK…
that makes sense
I’ll check the individual scripts…
Thanks alot