Using react-freezeframe with docusaurus static page render error

Viewed 243

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

0 Answers
Related