-
-
Notifications
You must be signed in to change notification settings - Fork 77
Description
I've only found one thread-discussion about this issue dating back to 2022 ended with nothing done.
Here i am asking if anyone here found a solution to my question.
Example:
const Parcel = ({remoteImport: remoteImportSource, component, props}) => {
return (!_.isEmpty(remoteImportSource) && !_.isEmpty(component) )? <ParcelComponent
key={uuidv4()}
config={remoteImport(remoteImportSource)}
mountParcel={mountRootParcel}
wrapWith="section"
mode="parcel"
component={component}
props={props}
handleError={(err) => {
console.log("Error Parcel Widget ", err)
}}
/> : <></>
}
This is my code, written with React syntax, calling a config associated to an Angular application. Lets refer to remoteImportSource as 'app-1'.
If i try to invoke my React Parcel component multiple times passing the same config ('app-1') but with different props, it results in multiple parcels with only one of them working (the others result in blank pages).
The same thing happens if i try to use the parcel through Angular, here's my code:
<div #parcelContainer id="parcelContainer">
<parcel *ngIf="readyToLoad"
[id]="id"
[config]="config"
[mountParcel]="mountParcel"
[customProps]="parcelProps"
(updateHeight)="updateHeightParcel($event)"
wrapWith="div"
mode="parcel">
</parcel>
</div>
Config is queal to "window.System.import('app-1') and again, only one parcel works, the other appear as blank pages.
What am i doing wrong? I'm desperately trying to find a way to fix this issue but i see no way out.
Thanks in advance