Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ShellBar: component breaks if content slot is used in React App #10890

Open
1 task done
Lukas742 opened this issue Feb 18, 2025 · 2 comments · May be fixed by #10921
Open
1 task done

ShellBar: component breaks if content slot is used in React App #10890

Lukas742 opened this issue Feb 18, 2025 · 2 comments · May be fixed by #10921
Assignees
@jdichev @dobrinyonkov
Labels
bug This issue is a bug in the code High Prio TOPIC P UI5_WEBC_4_REACT

Comments

@Lukas742
Copy link
Collaborator

Lukas742 commented Feb 18, 2025 •
edited
Loading

Bug Description

If the experimental content slot of the ShellBar component is used inside a React application, the component breaks.

Affected Component

ShellBar

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/github-k6n4x8jy?file=src%2FApp.tsx,index.html

Steps to Reproduce

  1. Go to StackBlitz
  2. See that only the ShellBar outside React (index.html) is rendered, not the one rendered by React (App.tsx)

Log Output, Stack Trace or Screenshots

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLSpanElement'
    |     property '__reactFiber$nye74rzwow' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at ShellBar2._observeAdditionalContextItems (@ui5_webcomponents-fiori_dist_ShellBar__js.js?v=58ce7247:11372:14)
    at ShellBar2.onBeforeRendering (@ui5_webcomponents-fiori_dist_ShellBar__js.js?v=58ce7247:10990:10)
    at ShellBar2._render (@ui5_webcomponents-fiori_dist_ShellBar__js.js?v=58ce7247:1182:12)
    at renderImmediately (chunk-VV7D5TFM.js?v=fd476140:380:16)
    at ShellBar2.connectedCallback (@ui5_webcomponents-fiori_dist_ShellBar__js.js?v=58ce7247:766:5)

Priority

None

UI5 Web Components Version

2.7.3

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

UI5WCR

Declaration

  • I’m not disclosing any internal or sensitive information.
@Lukas742 Lukas742 added the bug This issue is a bug in the code label Feb 18, 2025
@nnaydenow
Copy link
Contributor

Hi @dobrinyonkov, @PetyaMarkovaBogdanova,

Could you please take a look?

@nnaydenow
Copy link
Contributor

After investigating, I discovered that React attaches information to DOM nodes, some of which may be circular (facebook/react#24360). To address this, we likely need to modify the cache mechanism for observed elements—for example, by using a WeakSet inside the class instead of storing DOM references and stringifying them, as they might be manipulated in different ways depending on environment.

@dobrinyonkov dobrinyonkov self-assigned this Feb 20, 2025
@PetyaMarkovaBogdanova PetyaMarkovaBogdanova moved this from Issues to In Progress in Maintenance - Topic P Feb 20, 2025
@jdichev jdichev self-assigned this Feb 20, 2025
@dobrinyonkov dobrinyonkov linked a pull request Feb 21, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jdichev jdichev

@dobrinyonkov dobrinyonkov

Labels
bug This issue is a bug in the code High Prio TOPIC P UI5_WEBC_4_REACT
Projects
Maintenance - Topic P
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui5-shellbar): correct matching content check SAP/ui5-webcomponents
5 participants
@jdichev @petyabegovska @Lukas742 @dobrinyonkov @nnaydenow