Unexpected attributes on <ui-nav-menu>

mesija commented 1 week ago

Describe the bug

The <ui-nav-menu> component throws an error when unexpected attributes such as wfd-invisible and bis_size are added by third-party plugins. This issue causes the Shopify App Bridge to stop working, severely impacting our app's functionality.

Unfortunately, the exact plugins adding these attributes are unknown to us, as these errors occur on clients' setups, and we have not yet identified the specific plugins responsible. It appears to be a widespread issue, potentially involving multiple plugins.

To Reproduce

Steps to reproduce the behaviour:

Open the app from the Shopify admin.
During the loading process, some browser plugins seem to add their own attributes to the <ui-nav-menu> component.
See error in the console indicating unexpected attributes.

Expected behaviour

The Shopify App Bridge should ignore unexpected attributes and issue warnings instead of errors. This would prevent third-party plugins from breaking the app.

Additional Notes

It is recommended to adjust the validation for all Shopify App Bridge components globally. Since navigation is the first component to load, if attribute validation is not corrected across all components, this issue is likely to appear elsewhere in the app.

Contextual information

Packages and versions

@shopify/app-bridge @ 4
@shopify/app-bridge-react @ 4.1.3
@shopify/polaris @ 13.5.0

Platform

The errors have been observed on both Windows and MacOS, as well as in Chromium-based browsers and Mozilla Firefox. The provided example is just one instance, and the issue is not tied to any specific browser or operating system.

OS: MacOS, Windows
Browsers: Chrome, Firefox

Additional context

Other relevant dependencies in our project include:

@reduxjs/toolkit @ 2.2.5
@sentry/react @ 8.10.0
react @ 18.3.1
react-dom @ 18.3.1
redux @ 5.0.1
and more (full list can be provided if necessary).

This issue has significant impact as it affects core functionality of our app, which relies heavily on the Shopify App Bridge for various features.

quard8 commented 1 week ago

I have the same errors, but I don't see the impact on functionality. It's more annoying.

mesija commented 1 week ago

In the description, when I mentioned that I do not know how to reproduce the error, I was specifically referring to the error caused by third-party plugins, as I have not yet tracked down which plugins are responsible. However, the error itself is straightforward to reproduce. Simply adding a test attribute, such as <ui-nav-menu test="1">, will cause the navigation to fail to load.

These types of errors are most critical with the navigation and the save bar.

mesija commented 5 days ago

Reference: One of our clients has also reported this issue in their GitHub issue #389: Metafield Save button disappear.

Shopify / shopify-app-bridge