jQuery Syntax Error Unrecognized  Expression

As I upgrade older sites to use jQuery 3.3.1 I commonly encounter the following error:

Uncaught Error: Syntax error, unrecognized expression: ...

This error occurs when you are trying to select something with an invalid selector. jQuery 2.x and 3.x handle Sizzle related errors differently than 1.x, and will throw an Error in circumstances where jQuery 1.x wouldn’t, so it’s common to see this come up during an upgrade from 1.x.

How to fix it

To find the source of the issue I’d recommend the following steps.

1. Switch to an non-minified jQuery. This will provide a better stack trace for the error, which greatly helps us track down the source line that is causing the problem.
2. Open the Chrome Developer Toolbar Console where you see the error and expand the stack trace. Starting from the top, look for the first occurrence of a JS file other than jQuery. This is usually the source of the issue, and generally this will be your working *.js file rather than a plugin.
3. Click the filename to open the source code in the Sources tab.

Review the codeline for any usage of a jQuery selector, and double check that it’s properly used. I usually see it come up when a dynamic selector is being used. For example, something like this:

$( '#' + someVariable )

If someVariable is empty or false, then this will throw an error because $('#') is an invalid selector expression.

Hopefully this help you track down the source of your unrecognized expression errors with jQuery.