使用docusaurus静态页面渲染错误使用React-Freezeframe

发布于 2025-01-21 12:12:27 字数 1361 浏览 3 评论 0 原文

我想添加 react-freezefreezerfreame Docusaurus项目。我能够在Markdown代码中导入它，并且在预览本地WebPack Dev Server上的页面时，FreezeFrame正常工作并且正在完成其工作。但是，页面的构建失败了：

[ERROR] Docusaurus server-side rendering could not render static page with path /docs/tutorial-advanced/templates.
[INFO] It looks like you are using code that should run on the client-side only.
To get around it, try using `<BrowserOnly>` (https://docusaurus.io/docs/docusaurus-core/#browseronly) or `ExecutionEnvironment` (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).
It might also require to wrap your client code in `useEffect` hook and/or import a third-party library dynamically (if any).

我在使用它的速度页面上导入这样的冻结

import ReactFreezeframe from 'react-freezeframe'
import magnifying_glas from '../../static/img/magnifying_glas.gif'

<ReactFreezeframe src={magnifying_glas} options={{overlay:'true'}}></ReactFreezeframe>

框（我是菜鸟）。将FreezeFrame导入插件（如此处解释）也无效。

有什么想法如何导入 /实施客户只渲染？我正在使用Docusaurus的最新Beta .20。

谢谢你！马可

原文

I'd like to add react-freezeframe to my docusaurus project. I was able to import it in my markdown code and also when previewing the page on the local webpack dev server freezeframe is working fine and is doing its job. However, the build of the page fails:

[ERROR] Docusaurus server-side rendering could not render static page with path /docs/tutorial-advanced/templates.
[INFO] It looks like you are using code that should run on the client-side only.
To get around it, try using `<BrowserOnly>` (https://docusaurus.io/docs/docusaurus-core/#browseronly) or `ExecutionEnvironment` (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).
It might also require to wrap your client code in `useEffect` hook and/or import a third-party library dynamically (if any).

I am importing freezeframe like this on the markdown pages where I use it:

import ReactFreezeframe from 'react-freezeframe'
import magnifying_glas from '../../static/img/magnifying_glas.gif'

<ReactFreezeframe src={magnifying_glas} options={{overlay:'true'}}></ReactFreezeframe>

I followed the links in the info message, but I don't get how to implement the changes to render the content client only (I'm a noob btw).
Importing freezeframe as a plugin (like explained here https://docusaurus.io/docs/markdown-features/plugins#installing-plugins) also doesn't work.

Any ideas how to import / implement the client only rendering?
I am using the latest beta .20 of docusaurus.

Thank you!
Marco