search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.47k stars 254 forks source link

SSR / Next.js: Dev Server crashing when importing UI5 Web Components #8886

Closed MarcusNotheis closed 1 month ago

MarcusNotheis commented 2 months ago

Bug Description

When statically importing a UI5 Web Component in a Next.js application with server side rendering, the first load of the component is working fine, a refresh of the page is then crashing the dev server.

I think the issue is caused by the getAllRuntimes returning an empty array which is not foreseen in the displayFailedRegistrationMethod in the CustomElementsRegistry: https://github.com/SAP/ui5-webcomponents/blob/b64d76f7b425feeab61e93a9e452cd127b2cfb4d/packages/base/src/CustomElementsRegistry.ts#L47

Affected Component

UI5Element

Expected Behaviour

Dev server should not be crashing

Isolated Example

https://stackblitz.com/edit/github-kehu81?file=app%2Fpage.tsx

Steps to Reproduce

  1. Download the Stackblitz (online editor can't boot due to some native dependency error)
  2. npm install
  3. npm run dev
  4. Open http://localhost:3000, you can see the button
  5. Refresh the page in the browser, the dev server crashes and you can see the error log in the dev server.

Log Output, Stack Trace or Screenshots

TypeError: Cannot read properties of undefined (reading 'description')
    at eval (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:75:52)
    at Array.forEach (<anonymous>)
    at displayFailedRegistrations (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:52:26)
    at Timeout.eval [as _onTimeout] (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:38:13)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
 ⨯ uncaughtException: TypeError: Cannot read properties of undefined (reading 'description')
    at eval (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:75:52)
    at Array.forEach (<anonymous>)
    at displayFailedRegistrations (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:52:26)
    at Timeout.eval [as _onTimeout] (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:38:13)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
 ⨯ uncaughtException: TypeError: Cannot read properties of undefined (reading 'description')
    at eval (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:75:52)
    at Array.forEach (<anonymous>)
    at displayFailedRegistrations (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:52:26)
    at Timeout.eval [as _onTimeout] (webpack-internal:///(ssr)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:38:13)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

Priority

High

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

Chrome

Additional Context

In UI5 Web Components for React, we've worked around that issue by having dedicated builds for server-side and client-side rendering, but when generating React wrappers for custom UI5 Web Components libraries with our UI5 Web Components for React script, this is not feasible.

In addition, after https://github.com/SAP/ui5-webcomponents/pull/8184 has already been merged I would expect that I can just import all UI5 Web Components directly on the server as the DOM environment is shimmed and UI5 Web Components for React can remove the dedicated SSR build again.

Organization

UI5 Web Components for React / SIX Technologies

Declaration

PetyaMarkovaBogdanova commented 2 months ago

Hi colleagues, For me it was not possible to reproduce the issue, running the application locally. It runs smoothly and the server doesn't crash. Can you, please, take a look at the remarks inside the issue?

Best regards, Petya Markova. (UI5 Web Components Dispatcher)