For instance, sliders, mobile menus, image galleries, and pop-ups usually rely on JS (many using jQuery) to load and function properly.
Why do JS console errors occur?
Such issues could originally exist on the website or be present after NitroPack optimizes the site. If NitroPack is the culprit, they could be a result of the following:
Already excluded resources
Our Resource Loader feature
And here’s how you can identify such JS issues and how to solve them.
In most cases, the issue you will experience is that some of the elements on your website will need to be rendered correctly.
To solve this problem, excluding the proper resources from being optimized should resolve the issue.
Below, you will find some useful techniques for tackling such issues:
➡️ Inspect the console
When you notice a widget or element on your website is broken, inspecting the console logs of the page in the DevTools can help you narrow down which file or inline script breaks.
1. Open Developer Tools
Open the page where the issue occurs, and open the “Developer Tools” by clicking F12 or via the browser settings > More Tools > Developer Tools.
2. Inspect the error messages
Click on the “Console” tab and inspect the error messages logged in there (if you do not see anything, you may need to refresh the page to log all of the errors from the new session).
The most common error messages generated when you encounter such issues will be:
Uncaught ReferenceError: <code> is not defined
Uncaught ReferenceError: <code> is not defined
where <code> is either a variable or a function.
This is one of the most common errors you may encounter, and it usually happens when NitroPack re-works the order in which scripts are loaded. In some cases, a script may load earlier than expected, prior to its dependencies.
3. Bypass NitroPack’s cache and check again.
Open the non-optimized version of the same page using the “?nonitro” parameter following the steps above, and check if the same error messages are generated.
If the error messages are generated even when NitroPack is not serving the cache for the page, that means NitroPack does not cause the issue. Most probably, your site’s JS is missing some functions or variables.
In that case, we suggest reaching out to your developer for assistance.
4. If NitroPack’s causing the issue, search again for the specific variable/function
If the error messages are not generated in the non-optimized version, NitroPack’s optimization is causing the issue.
Search again for the <code> in the Developer Tools console to find where the function is being loaded or where the variable is being defined.
To do that, click on the three dots on the right and click “Search.” This search bar will let you search for the code across all loaded resources. Enter the <code>, and the search should bring some results.
4. Exclude the resources from optimization
1. You should gather all relevant code files into the Excluded Resources feature. For example:
2. Save the changes.
3. Re-optimize the page, and see if the issue is resolved.
To further refine the exclusions, you can try removing the excluded files one by one, checking if the error message doesn’t come back.
In some cases, further error messages can occur, so if that is the case, you should use the console technique again to resolve the additional error messages.
What if there are no console errors?
Although it is uncommon, there may be situations with no console errors. If this occurs, we suggest the following steps:
Examine the section of your website that is experiencing issues and attempt to identify the plugin responsible for adding the problematic functionality.
How to exclude the JS for the entire plugin
Excluding a certain plugin may be straightforward in some cases but more challenging in others. For example, let's say you're using the Slider Revolution plugin and you are trying to exclude it from optimization.
Opening DevTools, we can see that the plugin has two external resources.
To exclude them, go to your Dashboard >> General >> Excluded Resources and add the whole *revslider* folder.
This particular exclusion will exclude the two JS files that we found coming from Revolution Slider.
If we leave just those in place, you will notice that there are errors in the console and the slider is not working correctly.
One of the errors that you see is:
Uncaught ReferenceError: jQuery is not defined
This is the most common error, as many plugins, including Revolution Slider, rely on the jQuery library. When you excluded the Revolution Slider scripts, you changed the order of how the scripts are loaded.
You need to exclude jQuery so that the original JS files and jQuery are all excluded and are loading in the same order. You can identify the file name of jQuery using the previous method.
To exclude jQuery, add it to the excluded resources:
Excluding jQuery, you will notice that errors are now fewer. The only one that remains is caused by inline JS. Revolution Slider places inline JS that should also be excluded.
You can find the inline code by looking at the page's source code. You can open the source code by right-clicking somewhere on the page and selecting “View Page Source.”
Then, search for setREVStartSize, and you will find where the function is defined.
Add *setREVStartSize* to the excluded resources to resolve the error.
After saving the settings and reoptimizing the page, the console errors are gone: