无法解析模块说明符 "three" - 工作 Three/Wordpress 集成突然失败

Question

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

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

我没有要引用的行甚至文件，错误记录来自根域的第一行。我想强调的是，我完全没有对设置进行任何更改。我什至还没有更新到 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) 下载模块文件并将其放在我自己的服务器上并提供相对路径，出现相同的控制台问题（尽管如果 link 无效，它确实会抱怨 404，表明它确实遵循了它）。 B) 下载 three.min.js 文件并在此文件之前加载它，完全删除模块调用，我仍然得到相同的控制台错误（即使它甚至没有作为模块导入）。该站点已托管在 Cloudflare 上，因此我首先禁用了它。清除缓存没有任何改变，我在每一步都确认我没有加载缓存版本。在 Chrome 开发工具的网络选项卡中，module/file 被很好地加载到缓存中。一路上的某个地方，一些文件（我希望控制台会指定，也许这表明了问题）无法将“三”作为模块附加，我不知道为什么。任何帮助将不胜感激！

Answer 1

我遇到了完全相同的问题。我一个月前 (Github) 在 Github 上上传了我的项目，从那时起就没有改变一个符号，但大约一周前它开始在控制台中显示同样的奇怪错误。我发现以下内容： “由于 r137 在浏览器中使用 GLTFLoader 等 ES6 模块需要导入映射。在您的正下方添加以下部分 canvas。”

<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 - 在这里您可以看到更新的和以前的代码，在这些更改之后一切都开始工作

无法解析模块说明符 "three" - 工作 Three/Wordpress 集成突然失败

Failed to resolve module specifier "three" - Working Three/Wordpress Integration Suddenly Failed

javascript

wordpress

module

three.js