Is it possible for the shell and a remote to use the same stencil-library with different versions without conflicts? I really do not want to make the changes proposed in the article below.
Both the shell, and the remote use the same package, my-design-system, but with different versions.
The shell imports a module from the package inn app.module.ts, but does not use it in any components.
The remote use one component from the library.
Webpack:
Neither the remote nor the shell share anything
Problem:
When the remote is used in combination with the shell the library-component in the remote is not working as expected.
When the remote is used on its own, the library-component is working as expected.
If the library-version of the shell is updated, everything works.
It seems that the issue is that the shell loads the older version of the library first, and the remote is using this library, and not its own.
I was hoping that wrapping the remote in a web-component would be enough to isolate the remote.
Question:
Is it possible for the shell and the remote to use the same stencil-library without conflicts? I really do not want to make the changes proposed in the article above.
I think the issue is, that web components are globally registered and not versioned. Hence, the solution in the dev.to article seems to be the way to go.
For which library do you need help?
module-federation
Question
Is it possible for the shell and a remote to use the same stencil-library with different versions without conflicts? I really do not want to make the changes proposed in the article below.
Details:
Test setup: I am using a shell with one remote. The shell and remote are set up using webcomponent wrapper according to this tutorial. https://www.angulararchitects.io/blog/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide/
Both the shell, and the remote use the same package, my-design-system, but with different versions. The shell imports a module from the package inn app.module.ts, but does not use it in any components. The remote use one component from the library.
Webpack: Neither the remote nor the shell share anything
Problem: When the remote is used in combination with the shell the library-component in the remote is not working as expected. When the remote is used on its own, the library-component is working as expected.
If the library-version of the shell is updated, everything works.
It seems that the issue is that the shell loads the older version of the library first, and the remote is using this library, and not its own.
Possible solution: This post seems to explain the problem and solution, but I am looking for a way to solve the problem without changing the library as suggested: https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46
I was hoping that wrapping the remote in a web-component would be enough to isolate the remote.
Question: Is it possible for the shell and the remote to use the same stencil-library without conflicts? I really do not want to make the changes proposed in the article above.