2.4 | FAQ: How to manually resolve dependency conflicts?
Let's suppose that the third-party-lib@1.0/awesome-lib-util
dependency is causing the conflict. To solve dependency conflicts you can exclude or replace the dependency which is causing the conflict, as follows:
Using the TAG API (Only for the component)
As mentioned above, on way to solve this issue is by excluding this dependency, to aim that you should use the cubx-dependency-excludes
and the cubx-dependency-exclude
tags as follows:
... <demo-component cubx-webpackage-id="demo-package@1.0"> <cubx-dependency-excludes> <cubx-dependency-exclude artifact-id="awesome-lib-util" webpackage-id="third-party-lib@1.0"> </cubx-dependency-exclude> </cubx-dependency-excludes> </demo-component> ...
Another approach is to replace the dependency, to aim that you should exclude i as above, and include the desired dependency using the cubx-dependencies
and the cubx-dependency
tags as follows:
... <demo-component cubx-webpackage-id="demo-package@1.0"> <cubx-dependencies> <cubx-dependency webpackage-id="third-party-lib@2.0" artifact-id="awesome-lib-util"> </cubx-dependency> </cubx-dependencies> <cubx-dependency-excludes> <cubx-dependency-exclude webpackage-id="third-party-lib@1.0" artifact-id="awesome-lib-util"> </cubx-dependency-exclude> </cubx-dependency-excludes> </demo-component> ...
Using the Dependency API (For all components)
You could also exclude a dependency using the rootDependencyExcludes
property of the global window.cubx.CRCInit
object as follows:
<head> ... <!-- The below script block needs to be placed before(!) the crc-loader script is included --> <script> window.cubx = { CRCInit: { rootDependencyExcludes: [ { webpackageId: 'third-party-lib@1.0', artifactId: 'awesome-lib-util' } ] } }; </script> ... </head> ...
Additionally, you could replace the dependency by adding a new one and excluding an existing one, as follows:
<head> ... <!-- The below script block needs to be placed before(!) the crc-loader script is included --> <script> window.cubx = { CRCInit: { rootDependencies: [ { webpackageId: 'third-party-lib@2.0', artifactId: 'awesome-lib-util' } ], rootDependencyExcludes: [ { webpackageId: 'third-party-lib@1.0', artifactId: 'awesome-lib-util' } ] } }; </script> ... </head> ...
For more details check 2.4 | The Cubbles Dependency API.