小编ma-*_*-ku的帖子

我正在使用我的组件中的一些SVG图标做出反应应用程序.例如,我有一个SearchBar组件,其中包含输入元素以及一个包含搜索图标的按钮.

我通过在单个精灵文件中相应地设置xlinkHref属性,为所有SVG图标使用内联SVG.

一切似乎都运行得很好,除了我点击它们时我的SVG图标随机消失.包含图标的按钮元素不会消失,只会消失SVG图标.我检查了devtools上的DOM树,看起来有一个名为"#shadow-root"的节点存在问题.

当我的SVG图标可见时,它们被放置为"#shadow-root"的子节点.然而,当它们消失时,DOM树显示"#shadow-root"节点不再具有任何子节点,从而有效地使我的SVG图标无处可寻.

在消失之前:

消失后:

看到我可爱的SVG图标突然消失,令人心碎......

请指教!

-----编辑-----这是我用来插入SVG图标的组件的代码:

import React from "react";

const Icon = ({ name }) => (
  <svg>
    <use xlinkHref={`img/icons/sprite.svg#icon-${name}`} />
  </svg>
);
export default Icon;

我目前正在构建一个利用THREE.js.

我想从THREE.js库中导入一些代码，该库不属于官方发行版。在 的官方存储库下THREE.js，examples 文件夹下有一些模块，官方文档THREE.js利用这些模块来展示示例。

我如何利用这些模块并在我自己的代码中使用它们？

在我的应用程序中，我想使用该THREE.STLExporter模块。（https://github.com/mrdoob/ Three.js/blob/ master/examples/js/exporters/STLExporter.js ）

因为我已经安装three为我的应用程序的依赖项，所以我首先尝试简单地执行import * as THREE from 'three'，但这似乎没有成功。

然后我尝试examples直接访问该文件夹并通过执行 `require(' Three/examples/js/exporters/STLExporter') 手动获取模块，但这也不起作用。

我检查了官方文档的源代码，注意到示例直接在标签中包含必要的模块，但我不想这样做，因为我正在构建一个 React 应用程序。我希望能够通过 NPM 包含模块或在我的应用程序中存储模块的代码。

请帮助这里的菜鸟。谢谢你！

我们有一个应用程序，我们在路由定义中使用动态导入语法，如下所示：

  ...
  component: () => import('./components/SomeComponent'),

我们最近过渡到了 vite，自从切换以来，TypeError: Failed to fetch dynamically imported module每当我们部署新版本的应用程序时，我们都会捕捉到这一点。

根据这篇 SO post，发生这种情况是因为文件的哈希在新部署中无效，但是当我们完全交付新版本时，为什么这些文件仍然被以前的哈希引用？

我还发现了一个遇到相同错误的上一个问题，并在其线程中找到了这个链接，该链接讨论了 rollup 如何期望动态导入的特定语法：

// current
component: () => import('./components/SomeComponent')

// expected?
component: () => import('./components/SomeComponent.vue')

这可能就是我们收到该Failed to fetch dynamically...错误的原因吗？因为我的动态导入缺少文件扩展名？我有点困惑，因为即使没有文件扩展名，动态导入似乎仍然可以工作，只是我们在新部署上发现了错误。