将 Vaadin 与 Astro 结合使用

Question

我尝试在 Astro 支持的应用程序中使用 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 的链接； https://stackblitz.com/edit/github-veapdc?file=src%2Fpages%2Findex.astro&on=stackblitz

但一般来说，安装新的 astro 应用程序就足够了（https://docs.astro.build/en/install/auto/）安装 vaadin 组件；

npm i @vaadin/button

并将其导入到索引 astro 中；

import '@vaadin/button'

不一定要用，导入就够了。我也尝试在 svelte 组件中使用它，但出现同样的错误。有什么想法吗？？

Answer 1

对于遇到此问题的人，您可以按以下方法解决此问题。由于 Vaadin 组件是 Web 组件，因此它们可能无法与开箱即用的 Astro SSR 顺利运行。不要使用

import '@vaadin/button'

静态导入，而是在确认您正在浏览器上运行后选择动态导入。

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

要减轻无样式内容的 Flash (FOUC)，请将以下 CSS 添加到您的应用程序中：

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