Cómo Solucionar el Error «Uncaught TypeError: $ Is Not a Function» (Error de tipo no detectado: $ no es una función)

WordPress es totalmente compatible con JavaScript, así como con la biblioteca jQuery. Sin embargo, la forma en que WordPress implementa jQuery puede dar lugar a errores cuando intentas ejecutar funciones. Uno de los problemas más comunes es el error «Uncaught TypeError: $ is not a function».

Solucionar este error es relativamente sencillo si entiendes qué lo provoca. El alias «$» es el núcleo del problema, y jQuery y WordPress ofrecen varias formas de evitarlo para que puedas ejecutar las funciones que necesitas.

En este artículo, explicaremos qué es y qué causa el error «Uncaught TypeError: $ is not a function». Luego, también te mostraremos cómo solucionarlo. ¡Empecemos ya!

¿Qué Es el Error «Uncaught TypeError: $ Is Not a Function» en WordPress?

El error «Uncaught TypeError: $ is not a function» es un error de JavaScript común que se produce cuando la biblioteca jQuery no se carga correctamente o hay un conflicto con otros scripts que utilizan el símbolo ‘$’.

En WordPress, este error tiene más que ver con la forma en que el sistema de gestión de contenidos (CMS) implementa jQuery y menos con problemas de carga.

jQuery es una popular biblioteca JavaScript. Se utiliza mucho en los temas y plugins de WordPress para manejar diversos elementos dinámicos, animaciones y operaciones AJAX:

En jQuery, el símbolo «$» es un alias para el objeto jQuery, que es el objeto principal con el que interactúas cuando trabajas con la biblioteca. Hace que el código sea más corto, más legible y más fácil de escribir.

El error «Uncaught TypeError: $ is not a function» es algo difícil de solucionar porque no verás un mensaje de error claro. A diferencia de otros errores de WordPress, este problema puede ser provocado por elementos mal configurados en tu sitio o incluso por una página de error 404:

La forma más eficaz de diagnosticar el problema es echar un vistazo a la consola del desarrollador o utilizar los registros de depuración de WordPress.

¿Cuáles Son las Principales Causas del Error «Uncaught TypeError: $ Is Not a Function»?

El error «Uncaught TypeError: $ is not a function» tiene que ver con jQuery. Te encontrarás con este problema cuando se ejecute una función que incluya el símbolo «$» mientras se carga tu sitio web.

Estas son algunas de las posibles causas del error:

1. La biblioteca jQuery no se ha cargado correctamente. Si la biblioteca jQuery no está correctamente cargada o en cola, el símbolo «$» no se reconocerá como una función válida y arrojará un error. Esto no suele ser un problema en WordPress porque el sistema de gestión de contenidos (CMS) carga la biblioteca de forma nativa.
2. Estás utilizando jQuery en modo noConflict. Por defecto, WordPress ejecuta jQuery en modo noConflict. Eso significa que no reconoce el símbolo «$» como nombre de función. Para utilizarlo, tendrás que poner en marcha una solución alternativa.
3. Conflictos de plugins o temas. Algunos plugins o temas pueden tener JavaScript codificado incorrectamente que interfiere con el correcto funcionamiento de jQuery o utiliza el símbolo «$» de forma que causa problemas con otros scripts.

En resumen, WordPress no está configurado para reconocer el símbolo «$». Sin embargo, eso no significa que no puedas ejecutar código jQuery dentro del CMS. Al fin y al cabo, la librería forma parte de WordPress. Lo que tendrás que hacer es utilizar una solución para evitar problemas con el símbolo «$».

Cómo Solucionar el Error «Uncaught TypeError: $ Is Not a Function» (2 Maneras)

Antes de ponernos manos a la obra, es importante tener en cuenta que jQuery ya forma parte de WordPress. Algunos tutoriales te indicarán que pongas en cola jQuery, pero la librería forma parte del Sistema de Gestión de Contenidos (CMS) desde hace tiempo.

WordPress también ejecuta jQuery en modo «noConflict» de forma predeterminada. Esto significa que libera el símbolo «$» para que otras bibliotecas puedan utilizarlo. En lugar de desactivar el modo «noConflict», así es como debes abordar este problema.

1. Utiliza «jQuery» en lugar de «$»

Si tienes problemas al utilizar el símbolo «$» en funciones, puedes utilizar «jQuery» en su lugar. Para darte un ejemplo, aquí tienes el aspecto de una función jQuery básica que utiliza «$»:

$(function() {
  // Your code here will run once the DOM is ready
});

En este caso, una solución rápida sería sustituir el símbolo «$» por jQuery. El código quedaría así

jQuery(function() {
  // This code will not trigger the error
});

Alternativamente, puedes «envolver» el código en una expresión de función invocada inmediatamente que contenga el símbolo jQuery. El siguiente ejemplo no provocaría el error «Uncaught TypeError: $ is not a function» porque utiliza el símbolo jQuery como envoltorio:

jQuery(function ($) {
    // You can use $ inside the wrapper
    console.log($('.primary-menu'));
});

Tras realizar estos cambios en el código, puedes utilizar la consola de desarrollador de tu navegador o el registro de depuración de WordPress para ver si el error persiste. Si es así, puede que necesites asignar «jQuery» a otro símbolo para evitar más errores.

2. Utiliza un Alias Personalizado en jQuery

«$» es el alias por defecto para el objeto jQuery. Sin embargo, como WordPress ejecuta jQuery en modo noConflict, puede que necesites mapear un alias alternativo para evitar conflictos con otras bibliotecas.

Este proceso es relativamente sencillo, ya que puedes asignar el alias a un nuevo símbolo con una sola línea de código:

vvar $j = jQuery;

Ese código reemplaza el alias por defecto con «$j» pero puede ser cualquier otra cosa que quieras. Algunos desarrolladores prefieren este enfoque en vez de tener que escribir el objeto «jQuery» completo, como mostramos en el método anterior.

Si no estás seguro de dónde añadir este código, puedes leer nuestro tutorial sobre cómo añadir código a la cabecera y al pie de página en WordPress. Ten en cuenta que aunque registres un nuevo alias, podrás seguir utilizando «jQuery» en lugar de ese símbolo.

Resumen

WordPress te permite utilizar jQuery en tu sitio web. Sin embargo, si quieres evitar errores como «Uncaught TypeError: $ is not a function», tendrás que entender cómo implementa el CMS la librería. WordPress utiliza el modo «noConflict» de jQuery, lo que significa que no reconoce el símbolo «$».

El error «Uncaught TypeError: $ is not a function» aparece cuando intentas utilizar una función que llama a jQuery utilizando «$». Para evitar este problema, puedes escribir el objeto jQuery completo en su lugar o asignar el alias a un símbolo diferente para evitar conflictos.

Si utilizas Kinsta, puedes activar el modo de depuración de WordPress en el panel de control de MyKinsta para diagnosticar problemas. Además, todos nuestros planes ofrecen un soporte de primera calidad para ayudarte a solucionar cualquier problema que puedas encontrar. ¡Consulta nuestros planes!