Adding element to page with id that matches remote's name causes TypeError: remoteEntryExports.init is not a function

[VityaSchel]

Describe the bug

another 1.5 hours wasted on some questionable decisions made by authors of @module-federation/next-mf lol
The title is self explanatory:

const RemoteFiles = process.browser ? React.lazy(() => import('files/main')) : () => null
/// ...
return (
<a id='files'></a>
<RemoteFiles />
)

this causes errors TypeError: remoteEntryExports.init is not a function and files/main offline
this is because from old ancient times browsers put elements to window object by their id, so in the example above if we access window.files it will be <a> element, but it so happened that authors if this library also pollute window global space by putting some object there by remote name, so when it tries to access window.files instead of getting internal object it accesses DOM element which does not have init method
possible workarounds:

• for contributors: fix library and do not put anything to window or at least make a special private space or use hashed remotes names
• for users: prepend remotes names with some unique name that will never appear in window properties

Reproduction

https://github.com/module-federation/core

Used Package Manager

npm

System Info

latest @module-federation/next-mf version

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

Not our decisions. This is how it works on webpack. If I prefix or hash the name of the remote then how will you know what it called / how will it work with other parts of the ecosystem.
You can send a pr to improve the error message we throw

[ScriptedAlchemy]

https://github.com/module-federation/core/pull/2746/files

Feel free to adjust