Adding rendering to placeholder - _registerComponent(...): Target container is not a DOM element.

[vincelee888]

Hi,

We've got our Sitecore instance running with React templates, but have run into an issue when trying to add a Rendering through the Experience Editor.

On clicking the 'add here' button, and selecting our React Rendering, React throws an error in the browser console _registerComponent(...): Target container is not a DOM element.

Any ideas where we've gone wrong?

Thanks in advance!

[GuitarRich]

Hmm - let me see if I can recreate that problem. Is there anything special about your components?

[vincelee888]

Thanks for your prompt reply - we ended up editing something about the serverside rendering - I'll get the guy who did it to post what he did!

[jordanrobinson]

Hey there Rich!

It seems we were having this issue due to the client side react code not playing nicely when a controller was accessed through an ajax request. So on first load, or if you added a rendering through the presentation settings of the page, it would work okay. However if you used the add to here handles in experience editor, it would blow up with the error Vince mentioned.

I think this is probably more likely to be a symptom of how our frontend is put together, and we don't need any of the client side features at present. So to fix it I did notice you have the setting EnableClientside in the config, but this didn't seem to be hooked up to anything I could find, so I did a bit of digging and changed some of the code in the JsxView.cs:RenderView method to the following:

                    if (ReactSettingsProvider.Current.EnableClientside)
            {
                writer.WriteLine(reactComponent.RenderHtml());

                var tagBuilder = new TagBuilder("script")
                {
                    InnerHtml = reactComponent.RenderJavaScript()
                };

                writer.Write(System.Environment.NewLine);
                writer.Write(tagBuilder.ToString());
            }
            else
            {
                writer.WriteLine(reactComponent.RenderHtml(renderServerOnly: true).ToString());
                    }

And using renderServerOnly here was able to fix our problem. Not sure if you want a PR with that in or not since the issue is potentially specific just to us, but if so let me know.

Thanks, Jordan

[GuitarRich]

Yes - please submit a PR for that if you can. It would be good to get that in.