Hi, I’m using React4XP and despite having styles rendering correctly when previewing the page outside of editing mode, when I’m at the editing page the styles are not being rendered properly.
I see no errors in the browser console or in the requests of network tab in developer tools.
Do you have hydration turned off? Check if there’s a setting
react4xp.hydrate = false
in your app’s config file (link)
Also open your content in edit mode outside of Content Studio (click Preview, then replace “preview” with “edit” in the URL) and check if browser loads your CSS file.
Also check description of hydrate and ssr parameters for the render method here: API reference - Enonic Developer Portal.
For the global config, I saw in the docs that I should do that in ${XP_HOME}/config/${app}.cfg, so I created a file with the name of my app + ".cfg" inside xp-home/config and added that line react4xp.hydrate = false but it looked like it made no difference.
I also tried adding that line react4xp.hydrate = false to xp-home/config/com.enonic.xp.app.main.cfg and xp-home/config/system.properties just for testing and apparently nothing changed. (I’ve reset the entire application and rebuilt with clean build deploy between each change)
So I tried to disable hydration in the render method. Since you’ve cited hydrate and ssr, I tried disabling only the hydration, then disabling hydration and ssr, and then only ssr. None of these changes were able to change anything about the edit mode. Disabling ssr actually prevented 100% of the rendering of components, with a warning about the ssr disabled.
But looking at that edit mode outside of Content Studio and inspecting the html and comparing with the normal preview, I see that in edit mode the style tags from the react components are not being loaded in the head. I’m not sure what specific feature in edit mode that could be preventing that.
Yes, it should be done in your app’s config file. If your app is called “com.app.myapp” (find correct value in your gradle.properties) then the file should be called com.app.myapp.cfg.
When you make changes to the file, look at your XP log. If the filename is correct, you will see a message in the log saying that new config changes have been applied:
Loaded config for [com.app.myapp]
Reconfiguring application com.app.myapp
But you don’t have to do this. I was wondering if you already had that setting in the config file, because then it would affect the rendering. But hydration is on by default, so it should work out of the box.
By the way, what version of React4XP are you on? Current version is 5.1.1.
I’ve now tried adding style tag to my template and it didn’t disappear, neither in preview nor in edit mode. But I’m on the latest React4XP.
I saw these logs here, so the way I implemented worked.
But I understand, not having disabled hydration was already correct then.
My version is "@enonic/react4xp": "^5.0.0",
The style tags I’m talking about are the ones that come from importing a React component from a npm package and the component itself comes with its own css that becomes a style tag in the head.
The style tags I’m talking about are the ones that come from importing a React component from a npm package and the component itself comes with its own css that becomes a style tag in the head.
Can you share which npm package that is? Sharing a template+controller would be even better. Anything to help us reproduce the problem will do.
It’s a npm package that we build in a react project of our own and we import it in the enonic react4xp application. I can email the code to you so you can replicate the issue we are having.