React4xp SSR error [variable] is not defined

Bugs
1

Enonic version: Enonic CLI version 2.3.3
OS: MacOs 13.3.1

Topic: Using React4xp to server side render a component that is configurable by editor.

I am facing an issue where there is a variable not being defined, the variable in my case is a variable named “name”. This came up when I was adding checkboxes to the react component. There is no variable in the component that is undefined nor defined as “name” (checked this by running it outside of enonic).

The error occurs during the server side rendering process (if I do not render the checkboxes until client side rendering takes place problem is solved). However, this makes it a bit more tricky for content managers to edit the fields since it makes previewing a bit more time consuming.

Below is a small segment of the error message in the terminal, the stack trace is quite long, so I do not know which part is vital for error tracing this. So far all the config props are correct, and viewing this setting the component to be client side rendered, the issue is not present.

ScriptException: org.graalvm.polyglot.PolyglotException: ReferenceError: name is not defined
in com.enonic.lib.react4xp.ssr.ServerSideRenderer.runSSR

I understand I might not be providing very specific info regarding the issue, would be so helpful if anyone could assist on this, and if needed please ask for more context on a specific area of this matter so that I can update with more vital information, or pinpoints on where I could look to get vital error tracing ‘leads’.

2

In the stacktrace there might be lines referencing your js files. It may give you some clue where this name comes form.

3

checked this by running it outside of enonic

So if it’s a problem outside of Enonic XP, then why shouldn’t it be a problem inside Enonic XP?

I’m not understanding your explanantion…

Have you tried writing some log.info() statements in your part controllers? What does the props sent to React look like?

Have you tried writing some console.log() statements in your React code? What does the props received look like? Are you using state variables? How do they look, etc.

4

I might have been unclear here, but the issue is happening when I run this react component in Enonic XP, by running this component outside of Enonic XP the issue is not present. So the issue is related to the server side rendering functionality of react4xp.

No props are undefined, no props are missing, no props is named “name”.

State variables are used by a reducer, and they don’t give any errors or incorrect values.

Example of state:

state: {
    status: 'idle',
    userInput: {
        telephone: "0700000000"
    }
    fieldErrors: {
       telephone: false,
    }
}

example of props (forwarded through component.config)

props: {
    header: "Header text"
}
5

Indeed, it is giving me some clue to this,

the line at 60 in the build file that is generated is this:

var response = (0, import_react4xp.render)(component, props, request, {});

The lines around this are:

function get(request) {
    var component = (0, import_portal.getComponent)();
    var props = component.config;
    var response = (0, import_react4xp.render)(component, props, request, {});
    return response;
}

Is there a way to perform logs directly in the build file to check all these values that the function is using?

Hope this makes sense.

6

That code looks like a part controller.

Just add log.info statements to the part controller, as I previously suggested.

And rebuild, so you get a new “build file”.

–

If you run Enonic XP in DEV mode, you may edit a build file directly without rebuilding, but I don’t recommend it.