无法解析模块说明符“三” - 工作三/Wordpress 集成突然失败

Question

我管理一个在主页上使用 Three.js 动画的 WordPress 网站。我几个月前建立了这个网站，一切都运行得非常好——我什至在一周前把它展示给了某人，没有任何问题。昨天，我检查了网站，发现 3 没有加载，并且我在控制台中有这个：

未捕获的类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。

我没有要引用的行甚至文件，错误记录来自根域的第一行。我想强调的是，我完全没有改变设置。我什至还没有更新到 WP 5.9。这就是我最初设置的方式。抱歉，如果这不是最佳实践，但我想强调它实际上工作正常。 将动画javascript文件排队并将其类型定义为“模块”：

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;
}

“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';

如果有其他相关代码解决这个问题，请告诉我，但我一直在倾注并尝试 A）下载模块文件并将其放在我自己的服务器上并提供相对路径，同一个控制台出现问题（尽管如果链接无效，它确实会抱怨 404，表明它确实遵循了它）。 B）下载three.min.js文件并在此之前加载它，完全删除模块调用，我仍然得到相同的控制台错误（即使它甚至没有作为模块导入）。该站点已托管在 Cloudflare 上，因此我确实先禁用了它。清除缓存没有任何改变，我在每一步都确认我没有加载缓存版本。在 Chrome 开发工具的网络选项卡中，模块/文件被加载到缓存中就好了。在此过程中，某些文件（我希望控制台会指定，也许这表明问题）未能将“三”作为模块附加，我不知道为什么。任何帮助将不胜感激！

Answer 1

我遇到了完全相同的问题。一个月前我在 Github 上上传了我的项目 (https://kramzin.github.io/threejs-task/)，从那以后没有更改一个符号，但大约一周前它开始在控制台中显示同样的奇怪错误。我发现以下内容： “由于 r137 在浏览器中使用 ES6 模块（如 GLTFLoader）需要导入映射。在画布正下方添加以下部分。”

<script type="importmap">
    {
        "imports": {
            "three": "../master/three.js-master/build/three.module.js"
        }
    }
</script>

scripts.js 中的 three.js 导入语句如下所示：

import * as THREE from 'three'

https://github.com/Kramzin/threejs-task - 在这里你可以看到更新和以前的代码，在这些改变之后一切都开始工作了