[Storybook]: Cannot redefine property: design / issue with _generateAccessors

[rchrdchn]

Bug Description

My team and I are working on a new project and creating components/features in storybook for demo purposes.

We have been getting these errors which stops the UI5 Web Components from rendering properly: _generateAccessors for Title._generateAccessors, Icon._generateAccessors.

Any idea how to fix these issues?

It seems to be coming from https://github.com/SAP/ui5-webcomponents/blob/6bcb97039d6975f8e61f404dc8f6d2c72a249e6d/packages/base/src/UI5Element.ts#L933

Affected Component

No response

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

Chrome

TypeError
Cannot redefine property: wrappingType

Call Stack
 Title._generateAccessors
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:1908:20
 Title.define
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:2053:18
 async IllustratedMessage.define
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:2042:9

TypeError
Cannot redefine property: design

Call Stack
 Icon._generateAccessors
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:1908:20
 Icon.define
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:2053:18
 async Dialog.define
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:2042:9

Safari

TypeError
Attempting to change the setter of an unconfigurable property.

Call Stack
 defineProperty
  [native code]:undefined:undefined
 _generateAccessors
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:1908:34
 undefined
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:2053:36

Firefox

TypeError
can't redefine non-configurable property "wrappingType"

Call Stack
 _generateAccessors
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:1908:20
 define
  vendors-node_modules_ui5_webcomponents-base_dist_decorators_slot_js-node_modules_ui5_webcompo-e02d12.iframe.bundle.js:2053:18

---

Screenshots

Priority

High

UI5 Web Components Version

1.18.0

Browser

Chrome, Firefox, Safari

Operating System

MacOS

Additional Context

Blocking access for colleagues and management team.

Organization

SAP SuccessFactors

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hi @rchrdchn,

Could you please share what are you using to build the storybook for your project (custome-elements.json, classes, etc)? Also do you have repo or somehow we can test it?

[nnaydenow]

Hi @rchrdchn,

Could you assist us in checking the problem? Can you go back to where the issue happens with the 'define' method and then see if window.customElements is the same as customElements and let us know the result?

Additionally, could you please turn off the source maps for TypeScript in your console and share a picture of the smaller define method code?

BR, Nayden

[MarcusNotheis]

I have experienced the same issue, but in a totally different context:

For me, this sounds a bit like a race condition:

We have an application running with Webpack Module Federation, and depending on the order of feature imports like the FormSupport or InputSuggestions, this error was coming up. We played around with the order of the feature import and somehow this solved this issue on our end, but we never really found the root cause.

Maybe this helps finding the root cause.

[rchrdchn]

Could you assist us in checking the problem? Can you go back to where the issue happens with the 'define' method and then see if window.customElements is the same as customElements and let us know the result?

Additionally, could you please turn off the source maps for TypeScript in your console and share a picture of the smaller define method code?

[nnaydenow]

Hi @rchrdchn,

We think that storybook could override some global declared variables and it's fixed here: https://github.com/SAP/ui5-webcomponents/pull/7760. Do you have option do download the latest version of the project and to test? It's hard to validate from our side since there is no isolated example.

BR, Nayden

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.