@cds/react does not work in Docusaurus

[ycycxz]

Version: Docusaurus 2.2.0

test.js file at pages folder

npm install @cds/core --save
npm install @cds/react --save

```js import React from "react"; import { CdsIcon } from "@cds/react/icon"; import { ClarityIcons, homeIcon } from "@cds/core/icon"; function Test() { ClarityIcons.addIcons(homeIcon); return ( <> ); } export default Test; ```

when yarn run start everythig is fine

but yarn build

ReferenceError: Element is not defined

✔ Client

✖ Server
  Compiled with some errors in 13.33s

[ERROR] Docusaurus server-side rendering could not render static page with path /test.

ReferenceError: Element is not defined
[ERROR] Unable to build website for locale en.
[ERROR] Error: Failed to compile with errors.
[INFO] Docusaurus version: 2.2.0
Node version: v18.10.0

[kevinbuhmann]

I don't think any of the Clarity web components work in a node server context.

[ycycxz]

using <BrowserOnly>

facebook/docusaurus#8338

Example:

      <BrowserOnly fallback={<div>Loading...</div>}>
        {() => {
          require("@cds/core/icon/register.js");
          const {
            ClarityIcons,
            airplaneIcon,
            bellIcon,
            bullseyeIcon,
            chatBubbleIcon,
            crownIcon,
            pluginIcon,
            computerIcon,
            devicesIcon,
            infoStandardIcon,
            envelopeIcon,
            wifiIcon,
            storeIcon,
            talkBubblesIcon,
            terminalIcon,
            nodesIcon,
            piggyBankIcon,
            usersIcon,
          } = require("@cds/core/icon");

          ClarityIcons.addIcons(
            airplaneIcon,
            bellIcon,
            bullseyeIcon,
            chatBubbleIcon,
            crownIcon,
            pluginIcon,
            computerIcon,
            devicesIcon,
            infoStandardIcon,
            envelopeIcon,
            piggyBankIcon,
            storeIcon,
            talkBubblesIcon,
            terminalIcon,
            nodesIcon,
            usersIcon,
            wifiIcon
          );
        }}
      </BrowserOnly>

      <cds-icon shape="chat-bubble" size="lg"></cds-icon>

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.