Resolving the 'Uncaught TypeError' JavaScript Error in Under Construction Page

Users of the Under Construction plugin occasionally report a specific JavaScript error that prevents the under construction page from displaying correctly, particularly the theme images. The error message in the browser's console typically reads: Uncaught TypeError: Cannot read properties of undefined (reading 'add'). This guide will explain why this happens and provide steps to resolve it.

What Causes This Error?

This error is not a bug in the Under Construction plugin itself. Based on community reports, the error occurs when another script or plugin on the WordPress site is interfering with the Under Construction page's output. The interfering code injects attributes or scripts (like data-tgpli or tgpQueue.add) that expect a certain JavaScript object to be present. When that object is undefined, it causes the script to fail, which can break the functionality of the Under Construction page.

How to Troubleshoot and Fix the Error

Since the error is caused by a conflict, the solution involves identifying and dealing with the conflicting code. Follow these steps to resolve the issue.

Step 1: Conduct a Conflict Test

The most effective way to identify the source of the problem is to perform a conflict test. This process will help you determine whether the issue is caused by another plugin or your active theme.

1. Disable All Other Plugins: Temporarily deactivate every plugin on your site except for Under Construction Page.
2. Check for the Error: Visit your under construction page and see if the error is still present in the browser console (usually accessible by pressing F12).
3. If the Error is Gone: The problem is caused by one of your plugins. Reactivate your plugins one by one, checking after each activation, until the error returns. The last plugin you activated is the source of the conflict.
4. If the Error Persists: Temporarily switch your theme to a default WordPress theme like Twenty Twenty-Four. If the error disappears, the conflict is with your theme.

Step 2: Address the Conflict

Once you have identified the conflicting plugin or theme, you have a few options:

• Update: Check if there is an update available for the conflicting plugin or theme. An update may have already resolved the compatibility issue.
• Configure: Explore the settings of the conflicting plugin to see if you can disable the specific feature that is injecting the problematic code.
• Replace or Remove: If the plugin is not essential, or if no fix is available, you may need to find a replacement alternative or keep it deactivated while your site is under construction.

Step 3: Clear All Caches

After making any changes, it is crucial to clear all caching mechanisms to ensure you are seeing the most recent version of your site. This includes:

• Your browser cache
• Any server-side or plugin-based caching on your WordPress site (e.g., WP Rocket, W3 Total Cache)
• Content Delivery Network (CDN) caches if you use one (e.g., Cloudflare)

Need More Help?

If you have followed these steps and are still encountering the error, the broader WordPress community can be a great resource. When seeking help, be prepared to provide the URL of your site and the exact error message from the browser console. This information is vital for others to assist you effectively.