Adding Component In Placeholder Not Working in Experience Editor

[parvathisomanahallicnx]

Describe the Bug

I am trying to add a component under placeholder in experience editor, I am getting error " Could not find the rendering in the HTML loaded from server" , attached the screens.

"renderingDomElement" is null so getting the error.

Its Sitecore 9.3, Sitecore JSS 13.0.0, React frontend

When i debug in browser, I see that element for newly adding component is not generated, i see this has been generated in other Sitecore JSS project. I assume because element is not generating and so required ID value is not present in page html so it throws null for renderingDomElement.

To Reproduce

Open page in experience editor, click on "add here", selected component in "Select a Rendering" wizard, select datasource, click on okay, then the error will be displayed.

Expected Behavior

We should be able to add component in experience editor, by following steps : click on "add here" select rendering, select datasource, click ok, should be able to add component on the page.

Possible Fix

No response

Provide environment information

• Sitecore Version: 9.3
• JSS Version:13.0.0.0
• Browser Name and version: issue happens in evry browser
• Operating System and version (desktop or mobile): tested in desktop
• Link to your project (if available):

[art-alexeyenko]

Thank you for registering this @parvathisomanahallicnx

My main suggestion here would be to enable debug in your react proxy app, and see what happens behind the scenes. You can enable debug via .env or directly in config.js:

jss/samples/node-headless-ssr-proxy/config.js

Line 74 in 97561a0

debug: ((process.env.SITECORE_ENABLE_DEBUG || '').toLowerCase() === 'true') || false,

The missing HTML could be related to a number of things: a component is missing implementation, a component returns empty HTML or not rendering properly, or perhaps some error happens with Experience Editor itself. Having debug logging from the time issue happens will help narrow down the options.

[parvathisomanahallicnx]

Hi @art-alexeyenko , I need to do testing in experience editor, but debugging react application will not gives me any result right, we dont directly connect react app to sitecore EE in local, we deploy our react files to sitecore dist folder using jss deploy files, but am not sure how you want me to debug the experience editor issue through react app.

I am new to Sitecore JSS, now i see React app and sitecore cms EE is disconnected in my local, but not sure how to connect those, but when i connect CMS to react app, the localhost:3000 with my local sitecore works fine, but i am not sure how to debug Experience editor issue in react app.

[art-alexeyenko]

@parvathisomanahallicnx Yep, you are correct. You wouldn't need to debug the react app - instead it is the proxy app you'll be getting debug logs from. You can enable it in config.js on your proxy and watch the log output there.

[parvathisomanahallicnx]

Hi @art-alexeyenko sorry, am new to JSS, will you please let me know where i can find config.js and which is the proxy app?

[art-alexeyenko]

@parvathisomanahallicnx it should be in the root of your proxy app. I have linked the related file and the line in sample in my reply above.

[illiakovalenko]

@art-alexeyenko Experience Editor renders JSS apps using internal rendering host, "node-headless-ssr-proxy" is not used in this case.
@parvathisomanahallicnx As I recommended in our chat, please, make a request to Sitecore Support. Since 9.3 and JSS 13 is out of standard support. Potentially, the issue can be related to Experience Editor as well.
I can recommend you to take a look at this PR: #343
Related to: #141, it's a pretty old issue and potentially can be related to the problem that you have

[parvathisomanahallicnx]

@art-alexeyenko @illiakovalenko We have multisite setup, react application (Frontend app) has mono repo structure, each site codebase will have its own layout.js and approot files, the issue occurs only in 2 sites out of 5 sites, so i dont think its the issue with Experience Editor as it works for other sites. Please let me know if you want me to share any specific files.