0
213
Vistas$('#load') causa: Error de referencia no detectado: $ no está definido
Tengo el siguiente html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/main.css" /> <script src="js/main.js"></script> </head> <body> <button type="button" class="btn btn-outline-warning" onclick='debugger;lazy_load( $("#load") )' >Primary</button> <div id="load"> <div data-lazy-load="ajax/data-ajax.json">Loading...</div> <div data-lazy-load="ajax/data-ajax.html">Loading...</div> </div> </body> </html> import { ajax_query } from "../common/ajax"; export function lazy_load( container ) { container ||= $('#load'); ... } webpack.config.js tiene:
plugins: config.scripts.isUseJquery ? [ new webpack.ProvidePlugin({ jQuery: "jquery", jquery: "jquery", $: "jquery", "window.jQuery": "jquery", "window.jquery": "jquery", "window.$": "jquery", }), ] : [], }; Cuando abro esta página, aparece un error de Uncaught ReferenceError: $ is not defined cerca de este código lazy_load( $("#load") ) .
Cuando elimino el parámetro $("#load") , el mismo código dentro lazy_load funciona bien.
¡Incluso cuando la ejecución del script se detiene en el debugger , puedo ejecutar $("#load") en la consola sin ningún error!
¿Por qué onclick='lazy_load( $("#load") )' no funciona?
UPD
Cuando reemplazo onclick: onclick='lazy_load()' 
2 Respuestas
Responde la pregunta0
Al codificar con módulos, también debe importar jQuery explícitamente:
import $ from "jquery"; import { ajax_query } from "../common/ajax"; export function lazy_load( container ) { container ||= $('#load'); ... } De lo contrario, vea más soluciones posibles aquí:
Cómo importar jQuery en webpack
0
Para hacer $ global debo exponerlo.
Así que instalo expose-loader y ajusto mi webpack.config.js
module.exports = { module: { rules: [ { test: require.resolve("jquery"), loader: 'expose-loader', options: { exposes: [ '$', 'jQuery' ] }, }, ], } } Aviso: para el paquete web 5 hay un formato de configuración diferente, así que instalo la versión 1.0.3 expose-loader