ui5-webcomponents-react
ui5-webcomponents-react copied to clipboard
SAP
preact SSR
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/[email protected]/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/[email protected]?external=react,react-dom",
"preact": "npm:preact@^10.24.3",
"@preact/signals": "npm:@preact/signals@^1.3.0",
"tailwindcss": "npm:[email protected]",
"tailwindcss/plugin": "npm:[email protected]/plugin.js",
"react": "npm:[email protected]/compat",
"react-dom": "npm:[email protected]/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
- [X] I’m not disclosing any internal or sensitive information.
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.