Administro un sitio web de WordPress que usa una animación Three.js en la página de inicio. Construí este sitio hace meses y todo había funcionado perfectamente bien, incluso se lo mostré a alguien hace una semana y nada estaba mal. Ayer revisé el sitio y descubrí que Three no se está cargando y que tengo esto en la consola:

TypeError no capturado: no se pudo resolver el especificador de módulo "tres". Las referencias relativas deben comenzar con "/", "./" o "../".

No tengo una línea o incluso un archivo al que hacer referencia, el error se registra desde la primera línea del dominio raíz. Quiero enfatizar que no había cambiado absolutamente nada en la puesta a punto. Ni siquiera había actualizado a WP 5.9 todavía. Así es como originalmente había configurado las cosas. Lo siento si no son las mejores prácticas, pero quiero enfatizar que, de hecho, funcionó bien. Poniendo en cola el archivo javascript de animación y definiendo su tipo como "módulo":

 function my_custom_scripts() { wp_enqueue_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', array( 'jquery' ), '', true); wp_enqueue_script( 'scrolltrigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js', array( 'gsap' ), '', true); wp_enqueue_script( 'custom-animations', get_stylesheet_directory_uri() . '/js/animations.js', array( 'gsap' ),'',true ); } add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 15); add_filter('script_loader_tag','add_type_to_script', 10, 3); function add_type_to_script($tag, $handle, $source){ if ('custom-animations' === $handle) { $tag = '<script type="module" src="'. $source .'"></script>'; } return $tag; }

Primeras líneas de "animations.js":

 import * as THREE from 'https://cdn.skypack.dev/three@0.137.5/build/three.module.js'; import { GLTFLoader } from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js"; import { DRACOLoader } from 'https://threejs.org/examples/jsm/loaders/DRACOLoader.js';

Si hay otro código relevante para este problema, hágamelo saber, pero he estado analizando esto e intenté A) descargar el archivo del módulo y ponerlo en mi propio servidor y proporcionar una ruta relativa, aparece el mismo problema de consola ( aunque se quejó con un 404 si el enlace no era válido, sugiriendo que lo siguió). B) descargué el archivo three.min.js y lo cargué antes de este, eliminé la llamada del módulo por completo y sigo recibiendo el mismo error de consola (aunque ni siquiera se está importando como un módulo). Este sitio se ha alojado en Cloudflare, así que lo deshabilité primero. Borrar el caché no cambió nada, y he confirmado en cada paso que no he estado cargando una versión en caché. En la pestaña Red de las herramientas de desarrollo de Chrome, el módulo/archivo se carga perfectamente en la memoria caché. En algún lugar del camino, algún archivo (deseo que la consola lo especifique, tal vez eso sea indicativo del problema) falla al adjuntar "Tres" como un módulo y no tengo idea de por qué. ¡Cualquier ayuda sería enormemente apreciada!