I am the administrator of a WordPress website that features a captivating Three.js animation on its homepage. I created this site several months ago and everything was functioning perfectly - I even demonstrated it to someone just a week ago and encountered no issues. However, when I checked the site yesterday, I discovered that Three.js was failing to load, and I received the following error message in the console:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
Interestingly, there is no specific line or file mentioned in the error log, as it seems to originate from the root domain's first line. It is important to note that I had not made any changes to the setup whatsoever. I had not even upgraded to WP 5.9. This is exactly how I configured it initially. Although it may not adhere to best practices, I want to stress that it was working flawlessly at one point.
Including the animation javascript file and setting its type to "module":
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;
}
The initial lines of the "animations.js" file:
import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c58445e49496c1c021d1d11604a464b4b"></a>[email protected]/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';
If there are other relevant code snippets needed to address this issue, please inform me. I have extensively reviewed the situation and attempted various solutions, including A) downloading the module file onto my own server and specifying a relative path, but the same console error persists (although a 404 error occurs if the link is invalid, indicating that it was followed). B) downloading the three.min.js file and loading it before the current one, eliminating the module call entirely, yet the console error remains (despite it not being imported as a module). The site is hosted on Cloudflare, so I disabled it initially. Clearing the cache did not change anything, and I verified at each step that a cached version was not being loaded. In Chrome dev tools' Network tab, the module/file is successfully loaded into the cache. At some point along the process, a particular file fails to attach "Three" as a module and the reason eludes me. Any assistance provided would be greatly appreciated!