Chrome中用Import Map导入Three.js出错，Edge正常求问题原因

两个错误的连锁逻辑 #

这两个错误是先后触发的关联问题：

1. An import map is added after module script load was triggered：Chrome对import map的加载时序要求严格，它要求import map必须在任何模块脚本开始加载前完成加载。如果浏览器已经启动了模块脚本的加载流程，之后再添加的import map会直接被忽略。
2. Uncaught TypeError: Failed to resolve module specifier "three"：因为上面的import map未生效，浏览器无法识别three这种裸模块名（浏览器默认只支持带/、./、../前缀的模块引用路径），所以抛出模块解析失败的错误。

Chrome插件引发问题的核心原因 #

移除插件后错误消失，说明是第三方插件干扰了页面的脚本加载时序，常见的干扰场景包括：

• 广告拦截、隐私防护类插件：这类插件会在页面加载早期注入自定义脚本或修改DOM结构，提前触发了浏览器的模块加载检测逻辑，导致你的import map加载时，浏览器已经认为模块加载流程已经启动。
• 代码注入类插件：部分插件会在你的页面的import map标签之前，就引入了带有type="module"属性的脚本，让浏览器提前进入模块加载状态，后续你的import map自然无法生效。

Edge无错误的原因 #

Edge和Chrome虽同基于Chromium，但在细节处理上有差异：

• 你可能在Edge中没有安装那些会干扰脚本时序的插件；
• Edge对import map的加载时序容错性略高，允许在模块脚本开始加载后添加import map（这不属于标准行为，后续版本可能会调整）。

内容的提问来源于stack exchange，提问作者fei tang