El script no carga debido a un error del tipo MIME de JavaScript

5 may 2019, 18:47:32
Vistas: 27.2K
Votos: 2

Estoy tratando de hacer funcionar el plugin jQuery Masonry en un sitio. He actualizado mis archivos de plantilla para obtener las clases adecuadas donde el plugin las necesita. Luego, puse en cola mis scripts de esta manera:

function masonry_scripts() {
    wp_enqueue_script('masonry');
    wp_enqueue_script( 'masonry-script', get_template_directory_uri() . '/assets/js/masonry-script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'masonry_scripts' );

El script de masonry se está cargando correctamente, pero el archivo masonry-script.js no. Recibo el siguiente error en la consola:

El script de ".../assets/js/masonry-script.js?ver=5.1.1" se cargó aunque su tipo MIME ("text/html") no es un tipo MIME de JavaScript válido.[Más información] Falló la carga del archivo con origen "http://thewallmarket.local/wp-content/themes/storefront/assets/js/masonry-script.js?ver=5.1.1".

Desafortunadamente, no puedo proporcionar un enlace al sitio ya que está desarrollado localmente.

¿Qué está causando este problema? ¿Cómo puedo solucionarlo?

0
Todas las respuestas a la pregunta 1
2

Este error significa que el recurso (archivo JS en este caso) que estás cargando se espera que sea JS y en su lugar es HTML. Puede ser porque tu ruta es incorrecta o porque el archivo local no es JS.

Lo más probable es que tu script proporcionado en /assets/js/masonry-script.js no sea un archivo JS o no se pudo cargar como tal. Parece que podrías estar recibiendo un Archivo No Encontrado (con una redirección a tu 404).

Prueba esto entre las dos líneas de wp_enqueue_script():

printf(get_template_directory_uri() . '/assets/js/masonry-script.js');

Eso debería imprimir la ruta completa al archivo que intentas cargar. Verifica si puedes cargar la URL impresa en una pestaña (o ventana) aparte del navegador. Puede que necesites ajustar la URL así:

wp_enqueue_script('masonry-script', untrailingslashit(get_template_directory_uri() . '/assets/js/masonry-script.js', [], false, true);

También revisa el contenido del archivo local para ver si realmente contiene JS. Si no, puede que necesites descargar una copia correcta.

Si los requisitos de tu proyecto lo permiten y está disponible, podrías considerar usar jQuery Masonry desde un CDN.

Actualización: tema padre vs. tema hijo

Como se menciona en los documentos de código de WP para get_template_directory_uri(), si quieres la URL del tema hijo en lugar del tema padre, usa get_stylesheet_directory_uri() en su lugar.

5 may 2019 20:52:32
Comentarios

Gracias por tu respuesta. El archivo es un archivo js, y la ruta es correcta. Pero usando tu truco, me di cuenta de que la ruta que se imprime es para el tema padre, no para el tema hijo. Y por supuesto, quiero acceder al tema hijo.

Supongo que el problema viene de get_template_uri(). No creo que usar la ruta absoluta al archivo sea la forma correcta de solucionar esto, pero no sé qué hacer aquí. ¿Sabes por casualidad qué hacer?

user3615604 user3615604
5 may 2019 22:52:33

Respuesta actualizada: usa get_stylesheet_directory_uri().

Stephan Samuel Stephan Samuel
6 may 2019 18:56:43