A newly created custom DX Template component for a flight seat selection UI does not render in the Pega user portal or the App Studio preview panel. A standard Pega field placed in the same view renders correctly, confirming the container is functional. The component bundle loads successfully via the network, but console errors indicate a runtime execution failure within Pega framework files.
Steps Taken (Troubleshooting Performed):
- Component Creation: Created
type: "Template"component withconfig.json,index.tsx, andstyles.ts. - Data Mapping: Mapped
D_SeatMap1List.pxResults(verified 21 records returned) to theseatDataprop in App Studio. Mapped.SelectedSeatas the target property. - CSP Implementation: Added and imported
create-nonce.tsto satisfy Content Security Policy (CSP) requirements. - Publishing: Used
npm run publishsuccessfully multiple times after changes. - Debugging: Used browser Developer Tools (F12) to monitor network activity and console errors. Confirmed bundle loads with 200 OK status.
- Environment Sync: Cleared
ConstellationSvcURLDSS value and performed hard refreshes.
Observed Behavior:
- The area where the component should render is blank or white space.
- The browser console displays 3 or 4 red errors within Pega files (e.g.,
59438.1b55024e.js,Boa_dxcomp_componentsmap.js), indicating a script execution failure upon component load. - App Studio preview sometimes fails with
TypeError: Cannot read properties of null (reading 'getElementById').
Expected Behavior:
The interactive seat map UI defined in the component should display correctly in the Pega UI.
config.txt (1.8 KB)
index.tsx_.docx (17.8 KB)
styles.ts_.docx (16.4 KB)
create-nonce.ts_.docx (14.1 KB)
