This article will guide you through the basics of identifying and solving JavaScript console errors.

✳️ This article is suitable for more tech-savvy users who understand JavaScript loading and dependencies.

JavaScript console errors occur when an issue with the JavaScript code running on a website exists. Console errors appear in the developer console and provide valuable information about the error.

It is common to encounter JavaScript (JS) console errors. They can be valuable clues to help you track down why a particular feature might not work correctly.

For instance, sliders, mobile menus, image galleries, and pop-ups usually rely on JS (many using jQuery) to load and function properly.

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:
​

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:

Open the page where the issue occurs, and open the “Developer Tools” by clicking F12 or via the browser settings > More Tools > Developer Tools.

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
or

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.

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.

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.
​

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.

Although it is uncommon, there may be situations with no console errors. If this occurs, we suggest the following steps:

Alternatively, leave the entire plugin's JavaScript code excluded.

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.

/wp-content/plugins/revslider/public/assets/js/rbtools.min.js

/wp-content/plugins/revslider/public/assets/js/rs6.min.js
​

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:

📌 If you need any assistance or have questions, reach out to our support team at [email protected] or via this link: https://support.nitropack.io to resolve the issue in about 20 minutes.