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):

1. Component Creation: Created type: "Template" component with config.json, index.tsx, and styles.ts.
2. Data Mapping: Mapped D_SeatMap1List.pxResults (verified 21 records returned) to the seatData prop in App Studio. Mapped .SelectedSeat as the target property.
3. CSP Implementation: Added and imported create-nonce.ts to satisfy Content Security Policy (CSP) requirements.
4. Publishing: Used npm run publish successfully multiple times after changes.
5. Debugging: Used browser Developer Tools (F12) to monitor network activity and console errors. Confirmed bundle loads with 200 OK status.
6. Environment Sync: Cleared ConstellationSvcURL DSS 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.