SAP/ui5-webcomponents-react

preact SSR

kesavkolla opened this issue · 1 comments

kesavkolla commented

Describe the bug

Trying to setup a fresh framework with ui5 component. When I used ThemeProvider I get the following error:

error: Uncaught (in promise) ReferenceError: HTMLElement is not defined
    at https://esm.sh/v135/@ui5/webcomponents-base@2.3.0/X-ZS9yZWFjdCxyZWFjdC1kb20/denonext/dist/UI5Element.js:2:3633

Looks like ui5 is trying to attach the ui5 webcomponent on the server itself.

Isolated Example

No response

Reproduction steps

deno.json

  "imports": {
    "fresh": "jsr:@fresh/core@^2.0.0-alpha.22",
    "@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7",
    "@ui5/webcomponents-react": "https://esm.sh/@ui5/webcomponents-react@2.3.1?external=react,react-dom",
    "preact": "npm:preact@^10.24.3",
    "@preact/signals": "npm:@preact/signals@^1.3.0",
    "tailwindcss": "npm:tailwindcss@3.4.14",
    "tailwindcss/plugin": "npm:tailwindcss@3.4.14/plugin.js",
    "react": "npm:preact@10.24.3/compat",
    "react-dom": "npm:preact@10.24.3/compat"
  },

_app.tsx

import type { PageProps } from "fresh";
import { ThemeProvider } from "@ui5/webcomponents-react";

export default function App({ Component }: PageProps) {
  return (
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>fresh-project</title>
        <link rel="stylesheet" href="/styles.css" />
      </head>
      <body>
        <ThemeProvider staticCssInjected>
          <Component />
        </ThemeProvider>
      </body>
    </html>
  );
}

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.3.1

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
kesavkolla commented

Best thing is to decouple attaching webcomponents and react wrapping. The attachment to webcomponents is pure JS layer which can defer it to browser. The react component wrapper can generate the necessary JS on server side itself.