此AMD模塊未在Chrome中加載，但在Firefox，Safari和IE11中加載，為什么？

Question

此代碼在Chrome中不起作用，但在Firefox，Safari和IE11（其中IE11是目標瀏覽器）中有效。

它是另一個Polymer 2.x中的一個照明元素Web組件，所有組件都轉換為ES5和AMD模塊，並且使用polyfill使其可以在IE11中使用。 遺憾的是，它也適用於現代瀏覽器的polyfill，因此ES5轉換后的Web組件也可以在那里工作。 生活！

• 演示在這里： https : //lit-in-polymer2-poc.netlify.com/
• 倉庫在這里： https : //github.com/jdvivar/lit-in-polymer2-poc

這就是您在Chrome中看到的

這是您在所有其他瀏覽器中看到的

如您所見，Chrome無法正確解析按鈕組件。 它不尊重它的相對路徑。

代碼是這樣的（您不會在編譯后的回購中找到它）：

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

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

注意：請避免發表評論，建議我停止使用HTML Imports，Polymer 2.x和Bower，我完全知道😞此POC正是其中的第一步...

Answer 1

解決了！

這是一個polyfills問題！

為Web組件使用正確的polyfills文件解決了此問題： webcomponents-loader.js而不是webcomponents-lite.js

可以在以下位置找到該polyfill的文檔，該文檔不是刪除HTML導入的最新版本： https : //github.com/webcomponents/webcomponentsjs/tree/v1

在提交時在倉庫上更新： https : //github.com/jdvivar/lit-in-polymer2-poc/commit/b5d3c8a4ad6986788b62d576e2568674a4ab2dc6