For AG, App:Users, instead rendering the react component, Error:"React is not defined" in F12 console? Works fine for AG-Author!
I am using few pega provided React components/controls by referring UI gallery in my application.
While I launch the portal from Access group (AG) App:Authors, I have no issues and the control or component works fine.
But I faced the following error when I launch it with End user ID - AG - App:Users.
How to fix this? Am I missing any simple RBAC configuration ?
Uncaught ReferenceError: React is not defined at :8081/prweb/app/testapp_/j0gm0qYHdAlsjWHLRQDoEQ*/py_react_control_1878838931!!.js:2:187 pzpega_ui_react_13268872411!!.js:156
Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Rc (pzpega_ui_react_13268872411!!.js:192:299) at pzpega_ui_react_13268872411!!.js:110:158 at T (pzpega_ui_react_13268872411!!.js:122:161) at ph (pzpega_ui_react_13268872411!!.js:252:433) at lh (pzpega_ui_react_13268872411!!.js:161:409) at O (pzpega_ui_react_13268872411!!.js:156:71) at Sb (pzpega_ui_react_13268872411!!.js:248:27) at wh (pzpega_ui_react_13268872411!!.js:195:171) at fd (pzpega_ui_react_13268872411!!.js:195:265) at pzpega_ui_react_13268872411!!.js:198:111
***Edited by Moderator Marije to add FDBK***
***Edited by Moderator Marissa to add Support Case details***
Accepted Solution
Updated: 29 Nov 2023 9:57 EST
Pegasystems Inc.
GB
@Archana I found your support ticket INC-219108 (Not able to create, config cosmos React app in pega labs instance)
The issue was caused by the change made to Application Service Package. For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication type and you had modified it to Basic.
“For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication” The service package authentication was modified to for another set up. A requirement was provided to update that component too.
Note:
error is 'React is not defined' - to fix, use this workaround:
1/ move the load of the JS for the React bundle into the UserWorkform
<pega:onlyonce name="pega_ui_react"> <pega:static type="script" app="webwb"> <pega:bundle name="pzpega_ui_react" /> </pega:static> </pega:onlyonce>
<pega:onlyonce name="pyReactTicTacToe"> <pega:static type="script" app="webwb"> <pega:bundle name="py_react_control_tictactoe"/> </pega:static> </pega:onlyonce>
2/ attach the CSS file to the skin ruleform <pega:static type="style" app="webwb"> <pega:file name="py_react_tictactoe.css"/> </pega:static>
Note that there is an enhancement request in place:
@Archana I found your support ticket INC-219108 (Not able to create, config cosmos React app in pega labs instance)
The issue was caused by the change made to Application Service Package. For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication type and you had modified it to Basic.
“For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication” The service package authentication was modified to for another set up. A requirement was provided to update that component too.
Note:
error is 'React is not defined' - to fix, use this workaround:
1/ move the load of the JS for the React bundle into the UserWorkform
<pega:onlyonce name="pega_ui_react"> <pega:static type="script" app="webwb"> <pega:bundle name="pzpega_ui_react" /> </pega:static> </pega:onlyonce>
<pega:onlyonce name="pyReactTicTacToe"> <pega:static type="script" app="webwb"> <pega:bundle name="py_react_control_tictactoe"/> </pega:static> </pega:onlyonce>
2/ attach the CSS file to the skin ruleform <pega:static type="style" app="webwb"> <pega:file name="py_react_tictactoe.css"/> </pega:static>
Note that there is an enhancement request in place:
FDBK-86582 (OOTB react controls do not load intermittently)
Contact your AE if you need any more help with that.
As this post is now almost a year old, if you or @DILEEPKUMAR need any more help, please log a New Question each with the details of the product and symptoms so that users can see this with a fresh set of eyes.
Updated: 7 Dec 2022 10:19 EST
Pegasystems Inc.
IN
@Archana Can you please check the application url that you are using? For react to work the application url is very important. Please use the url that is given in application alias. I believe it will work. Sometimes when you log off from the browser there might be an underscore next to app name in the url, with that react wont work. I think that is the problem in your case as well. I could see an _ next to your test app ideally that will not be your application alias. Check the highlighted part from below screenshot
SoftServe
DE
Hi @SrinidhiM
thank you for the response.
Its my typo that I edited the application name and removed hostURL while posting here.
Originally, the Application URL alias is correct. I even tried out once again and verified right now.
SoftServe
DE
Thank you for the suggestion, Srinidhi.
The application is still in hybrid mode. Using Server-Rendered UI with React based landing pages.
Highmark Health Solutions INC
US
Is this issue resolved. we too have a similar issue being reported in Dynatrace and looking for some answers.
Accepted Solution
Updated: 29 Nov 2023 9:57 EST
Pegasystems Inc.
GB
@Archana I found your support ticket INC-219108 (Not able to create, config cosmos React app in pega labs instance)
The issue was caused by the change made to Application Service Package. For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication type and you had modified it to Basic.
“For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication” The service package authentication was modified to for another set up. A requirement was provided to update that component too.
Note:
error is 'React is not defined' - to fix, use this workaround:
1/ move the load of the JS for the React bundle into the UserWorkform
<pega:onlyonce name="pega_ui_react"> <pega:static type="script" app="webwb"> <pega:bundle name="pzpega_ui_react" /> </pega:static> </pega:onlyonce>
<pega:onlyonce name="pyReactTicTacToe"> <pega:static type="script" app="webwb"> <pega:bundle name="py_react_control_tictactoe"/> </pega:static> </pega:onlyonce>
2/ attach the CSS file to the skin ruleform <pega:static type="style" app="webwb"> <pega:file name="py_react_tictactoe.css"/> </pega:static>
Note that there is an enhancement request in place:
@Archana I found your support ticket INC-219108 (Not able to create, config cosmos React app in pega labs instance)
The issue was caused by the change made to Application Service Package. For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication type and you had modified it to Basic.
“For cosmos react to work, both Application and API service packages need to be using OAuth 2.0 authentication” The service package authentication was modified to for another set up. A requirement was provided to update that component too.
Note:
error is 'React is not defined' - to fix, use this workaround:
1/ move the load of the JS for the React bundle into the UserWorkform
<pega:onlyonce name="pega_ui_react"> <pega:static type="script" app="webwb"> <pega:bundle name="pzpega_ui_react" /> </pega:static> </pega:onlyonce>
<pega:onlyonce name="pyReactTicTacToe"> <pega:static type="script" app="webwb"> <pega:bundle name="py_react_control_tictactoe"/> </pega:static> </pega:onlyonce>
2/ attach the CSS file to the skin ruleform <pega:static type="style" app="webwb"> <pega:file name="py_react_tictactoe.css"/> </pega:static>
Note that there is an enhancement request in place:
FDBK-86582 (OOTB react controls do not load intermittently)
Contact your AE if you need any more help with that.
As this post is now almost a year old, if you or @DILEEPKUMAR need any more help, please log a New Question each with the details of the product and symptoms so that users can see this with a fresh set of eyes.