Si estás usando jQuery, Angular JS, o simplemente el viejo JavaScript y recibes el error «Uncaught ReferenceError: $ is not defined» que significa que $ es una variable o un método que estás intentando usar antes de declararlo usando la palabra clave var. En jQuery, es un nombre corto de la función jQuery() y se usa más comúnmente en $(document).ready(function()). Si usted está haciendo algunas cosas jQuery cuando se carga el DOM y obtener este error significa que su navegador tiene un problema de carga de la biblioteca jQuery, ya sea desde el Internet o el sistema de archivos local.
En este artículo, verás algunas de las razones más comunes para el error «Uncaught ReferenceError: $ no está definido» y cómo resolverlas, pero antes de eso vamos a aprender algunos conceptos básicos sobre el temido Uncaught ReferenceError: $ no está definido error.
Y, si quieres aprender JavaScript moderno o subir de nivel tus habilidades, entonces te sugiero que te unas a The Complete JavaScript Course: Build Real Project por Jonas Scmedtmann en Udemy. Es uno de los mejores cursos de mano para aprender ES 6 y otras nuevas características de Javascript.
Una de las razones comunes de este error es empezar directamente con jQuery sin conocer los fundamentos de JavaScript. He visto a muchos desarrolladores web que vienen de Java, C#, HTML, y Python fondo comenzó a utilizar jQuery sin saber mucho acerca de JavaScript.
Si le sucede a trabajar en el mismo escenario, le sugiero encarecidamente que lea al menos uno de los buenos libros de JavaScript para principiantes por ejemplo, Head First JavaScript. Recuerda siempre que jQuery es una librería construida sobre JavaScript, una vez que conoces JavaScript, es mucho más fácil solucionar cualquier error de jQuery.
Uncaught ReferenceError: X no está definido
Como JavaScript se ejecuta dentro del navegador, tu navegador como Firefox, Chrome, Edge o Internet Explorer lanza este error cuando estás usando una variable que no está definida, por ejemplo, el siguiente código lanzará este error, pero una vez que declares la variable usando la palabra clave var, el error desaparecerá:
data; // ReferenceError: data is not definedvar data;data; // No hay más errores
De forma similar, si accedes a un método antes de declararlo obtendrás este error como se muestra a continuación:
proceso(); // ReferenceError : proceso no está definidoproceso = function(){};proceso(); // Sin errores
Ahora que has aprendido cuando el navegador lanza Uncaught ReferenceError: $ is not defined, es hora de ver algunas razones comunes por las que se produce este error mientras se utiliza jQuery, AngularJS u otra librería JavaScript que utiliza $ como atajo.
1) Una de las razones más comunes de «ReferenceError: $ is not defined» en la aplicación basada en jQuery es que el plugin de jQuery se incluye antes del archivo jQuery. Como el plugin de jQuery utiliza $, lanza «ReferenceError: $ is not defined» si no lo encuentra, lo cual es lógico porque jQuery no se ha cargado hasta entonces.
<script src="/lib/jquery.plugin.js"></script><script src="/lib/jquery.min.js"></script>
Solución: Incluir el archivo jquery.js antes de cualquier archivo del plugin jQuery.
<script src="/lib/jquery.min.js"></script><script src="/lib/jquery.plugin.js"></script>
2) La segunda razón más común de obtener «ReferenceError: $ no está definido» en jQuery se debe a la ruta incorrecta, ya sea un error tipográfico o el archivo jQuery se mueve a alguna otra ubicación, el navegador no es capaz de cargar el archivo jQuery.
Una solución de este problema es simplemente arreglar la ruta de acceso a la biblioteca jQuery. Si está descargando jQuery desde un CDN, también puede utilizar el archivo jQuery alojado en Google, que casi siempre está disponible.
3) Otra razón extraña pero común de «ReferenceError: $ no está definido» en jQuery» es que podría estar trabajando sin conexión pero cargando jQuery desde Internet. Es uno de los errores tontos que todo desarrollador web comete en algún momento. La solución es sencilla, o te conectas a internet o utilizas una copia local de la librería jQuery como se muestra a continuación:
<script src="/js/jquery.min.js"></script>