How can I fix the "Uncaught ReferenceError: $ is not defined" and "Uncaught SyntaxError: Unexpected token <" errors on my Webflow site?

To resolve the “Uncaught ReferenceError: $ is not defined” and “Uncaught SyntaxError: Unexpected token <” errors on your Webflow site, follow these steps:

​

1. Resolve "Uncaught ReferenceError: $ is not defined"

• jQuery Dependency: Ensure jQuery is loaded before any custom scripts using $. In Webflow, jQuery is loaded by default, but confirm no custom scripts are executed before jQuery is initialized.
• Script Placement: Go to the Page Settings of the involved page and ensure your scripts are placed in the Footer Code section to ensure jQuery is available.
• Check External Scripts: If using external scripts, make sure they depend on jQuery (<script src="..."></script>) are also placed in the Footer Code.

​

2. Resolve "Uncaught SyntaxError: Unexpected token <"

• Incorrect Script Reference: This often occurs when referencing a script. Check if the script source is incorrect or returns an HTML page instead of a JavaScript file.
• Inspect Network Requests: Use the browser's developer tools to check if the requested script URL is loading correctly and not returning an HTML file or 404 page.
• Correct the Path: If the script path is incorrect, update it in the Project Settings or Custom Code section.

​

3. Test and Validate

• Refresh and Test: After making corrections, refresh your Webflow site to check if the errors are resolved.
• Inspect Console: Re-examine the browser console to verify that these specific errors no longer appear.

​

Summary

Ensure jQuery loads before your scripts by placing custom JavaScript in the Footer Code and verify all external script references are correct. Use the browser's developer tools to inspect network errors and correct any HTML-returning script paths.