search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
443 stars 99 forks source link

preact SSR #6518

Open kesavkolla opened 4 days ago

kesavkolla commented 4 days ago

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

kesavkolla commented 2 days ago

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.