将Vaadin与Astro一起使用

Question

我试图在Astro Powered应用中使用Vaadin组件。不幸的是，我遇到了这个错误。

  Named export 'dedupingMixin' not found. The requested module '@polymer/polymer/lib/utils/mixin.js' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from '@polymer/polymer/lib/utils/mixin.js';
  const { dedupingMixin } = pkg;

这是Stackblitz的链接； ，

但总的来说，它足以设置新的Astro App（ https://docs.astro.build/en/install/auto/ ）安装vaadin组件; npm i @vaadin/button 并将其导入索引Astro； 导入'@vaadin/button'

您不必使用它，导入就足够了。我也尝试在Svelte组件中使用它，这是相同的错误。有什么想法吗？

Answer 1

对于那些遇到此问题的人，您可以如何处理它。由于Vaadin组件是Web组件，因此它们可能不会在Astro SSR开箱即用而使用。与其使用导入量子'@vaadin/button'，不如在确认您在浏览器上运行后选择动态导入。

if (typeof window !== "undefined") {
  import("@vaadin/button");
}

要减轻未风格的内容（FOUC）的闪光，请在您的应用程序中添加以下CSS：

vaadin-button:not(:defined) {
  visibility: hidden;
}