v13 - UUI no longer exported to be used by packages

lauraneto commented 11 months ago

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

13.0.0-rc4

Bug summary

I was trying to update a package that uses the uui library to v13 and am getting this error on the console: Uncaught ReferenceError: uui is not defined. In v13, due to the new login screen changes, the uui library is no longer being exported to the window object. This is because it is now being included as part of the login es module, as its own chunk.

Due to the way Umbraco loads package dependencies, we are forced to use IIEF, and can't use an ES module. (afaik, please let me know if this is not the case) This used to work perfectly fine in v12 with @umbraco/uui set as external, as the dependency was resolved from the window object as uui.

As a workaround I tried to not set uui as external. While not ideal, because we would be loading duplicate code, I thought it might be worth a shot. But that also didn't work, and triggered other issues. Example:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "uui-modal-sidebar" has already been used with this registry

The problem is caused by the fact that the code is now duplicated and due to a bug in the UUI library itself, as it is using customElement instead of the umbraco custom defineElement decorator that ensures elements are only registered once.

This means that packages that use the uui library and define their own custom elements are effectively broken in v13.

Specifics

No response

Steps to reproduce

Open the dev console in an Umbraco 13 installation
Verify that window.uui is undefined
Open the dev console in an Umbraco 12 installation
Verify that window.uui is defined

Expected result / actual result

No response

This item has been added to our backlog AB#35880

github-actions[bot] commented 11 months ago

Hi there @lauraneto!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
We'll replicate the issue to ensure that the problem is as described.
We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot :robot: :slightly_smiling_face:

iOvergaard commented 11 months ago

Hi @lauraneto First, you are right that you can't use es modules in the current backoffice and thus can't load from other es modules.

You are right that uui is no longer available and that is a regression, however, I had a look through the code you linked and I see that you can most likely avoid importing directly from uui save from the uui-icon import, but that will be tree-shaken away anyway since it's a type import.

I see you have many imports such as this:

import {defineElement} from '@umbraco-ui/uui';

I would recommend using Lit's own @customElement decorator instead and in doing so avoiding having a dependency directly on a value exported by the UI library.

If you change that in the 4 files that use it, then your package should start working again.

lauraneto commented 11 months ago

Hi @iOvergaard ,

Thanks for having a look! 🙂 You are correct, sorry I didn't actually check what we were using from uui 😅, in our case replacing the defineElement usages with customElement does work fine.

Still, I think the issue remains as at the moment we are not extending any uui element, but if we wanted to, we wouldn't be able to.

iOvergaard commented 11 months ago

@lauraneto Agreed. We are looking into a fix!

Zeegaan commented 10 months ago

Fixed in https://github.com/umbraco/Umbraco-CMS/pull/15412 (Its not part of rc5 unfortunately 😢 )

umbraco / Umbraco-CMS