【问题标题】：This AMD module is not loading in Chrome but it does in Firefox, Safari and IE11, why?这个 AMD 模块在 Chrome 中不加载，但在 Firefox、Safari 和 IE11 中加载，为什么？
【发布时间】：2019-08-29 17:33:19
【问题描述】：

此代码在 Chrome 中不起作用，但在 Firefox、Safari 和 IE11（其中 IE11 是目标浏览器）中起作用。

它是另一个 Polymer 2.x 中的一个发光元素 Web 组件，全部转换为 ES5 和 AMD 模块，并通过 polyfill 使其在 IE11 中工作。可悲的是，现代浏览器也使用了 polyfill，因此 ES5 转换的 Web 组件也可以在那里工作。生活！

这里有一个演示：https://lit-in-polymer2-poc.netlify.com/
repo 在这里：https://github.com/jdvivar/lit-in-polymer2-poc

这就是您在 Chrome 中看到的内容

这是您在所有其他浏览器中看到的内容

如您所见，Chrome 无法正确解析按钮组件。它不尊重它的相对路径。

代码是这样的（编译后你不会在 repo 中找到它）：

define(['node_modules/@lion/button/lion-button.js']);

/web/bower_components/simple-wc/simple-wc.html

注意：请避免 cmets 建议我停止使用 HTML Imports、Polymer 2.x 和 Bower，我完全知道 ???? 这个 POC 正是迈出的第一步……

【问题讨论】：

标签： amd polymer-2.x lit-element es5-compatiblity

【解决方案1】：

解决了！

这是一个 polyfills 问题！

为 Web 组件使用正确的 polyfills 文件解决了这个问题：webcomponents-loader.js 而不是 webcomponents-lite.js

可以在此处找到该 polyfill 的文档，这不是最后一个删除 HTML 导入的版本： https://github.com/webcomponents/webcomponentsjs/tree/v1

在此提交时更新了 repo：https://github.com/jdvivar/lit-in-polymer2-poc/commit/b5d3c8a4ad6986788b62d576e2568674a4ab2dc6

【讨论】：