Template with React4XP

Help
1

Hello I’ve been trying to use React4Xp and having some trouble on creating a template for a content type from Content Manager. I can build a default page normal, but when i try to use it as a template for a content-type I keep getting this error:

Error: lib-react4xp#templates: Couldn’t build page template from JSX. jsxPath="" (com.enonic.xp.resource.ResourceProblemException)

The render of default page is basically the same of React4XP tutorial:

const content = portal.getContent();

return {
    body: renderPageBody({
        content,
        {}
    }),
}
2

In general, the times I’ve come across ResourceProblemException, it’s been a syntax error in one of my files, such as invalid XML (forgetting to close a tag properly, etc.)

Is your content type OK? You can check this by trying to create a new content in Content Studio, and if there is an error in the content type descriptor XML then the server log should get an error message.

4

Yep, the reference to the template (or view) file seems to be missing: jsxPath="" is most likely the issue here. But renderPageBody aims to be able to handle that and use a “local” jsx file (same name as the controller, same folder) as default, or fall back to a generic Page.jsx file from the react4xp-templates package. It appears that for some reason the fallback to the generic page template isn’t kicking in.

For starters, if you look in your build.gradle, what’s your version of lib-react4xp? And in package.json, what are your versions of the packages react4xp-build-components and react4xp-buildconstants?

(Other leads for diagnostics: is there a local default.jsx file in the page folder? And if you log the content object that’s passed into renderPageBody, what is the value of content.page.descriptor, since that’s used to derive the missing jsxPath?)

I’m not ruling out a bug in renderPageBody (and renderLayoutBody). In the longer run, what we want is to get .render to be able to handle regions as well - in which case renderPageBody will be deprecated. That may be an argument for using and old-style page controller instead, if that’s an option for you: https://github.com/enonic/starter-react4xp/tree/852803a1b364ebd6f7e1e1d2ad6f892779883b86/src/main/resources/site/pages/default

1 Like
5

Hey, i think it’s all right with the content type, it’s a pretty basic one that i’ve used in other projects, i just migrated it to React4XP to see how it would work

6

Sorry for the delay on response… I just cloned the starter-react4xp branch so it’s pretty much the same configuration, i’ll pass it here tho.
My version of lib-react4xp is 0.5.0 (include ‘com.enonic.lib:lib-react4xp:0.5.0’)
My version of react4xp-build-components is ^0.5.0 (“react4xp-build-components”: “^0.5.0”)
My version of react4xp-buildconstants is ^0.8.0 (“react4xp-buildconstants”: “^0.8.0”)

Yes, there is a default.jsx file in site/pages/default.

Weirdly there’s no descriptor on the content, i’ll just pass the full content output for reference.

{"_id":"4e90463d-d68a-4981-8703-a1e0d0dce272","_name":"article-test-4","_path":"/home/articles/article-test-4","creator":"user:system:su","modifier":"user:system:su","createdTime":"2019-12-06T19:11:51.986466Z","modifiedTime":"2019-12-11T21:22:23.100912Z","owner":"user:system:su","type":"nco.react:article","displayName":"article test 4","hasChildren":false,"valid":true,"childOrder":"modifiedtime DESC","data":{"title":"This is a test article 4","subtitle":"This is a reasonably bigger text, since it's a subtitle and should be displayed under the title.","body":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n"},"x":{},"page":{"type":"page","path":"/","template":"ae35f8e0-9425-4030-94f1-22b749161a5a","config":{},"regions":{"main":{"components":[{"path":"/main/0","type":"part","config":{}}],"name":"main"}}},"attachments":{},"publish":{}}
7

Reproduced from the commit I’m fairly sure you’re using (v0.4.0 of the starter, which is the one that matches the code and versions you wrote). Made a bare-bone content type with a single input, created an instance of it, and created a template where I connected that content type to the default page controller.

There is indeed no content.page.descriptor value when the content is displayed with a template - and so it fails if there’s no jsxPath parameter. :frowning: That’s a bug (or actually, a missing feature) - It’ll definitely be part of a fix in a future React4xp update.

This means that for now, it’s probably better to use code and library/NPM-package versions from v0.2.10 of the react4xp starter, without jsx in the page controller as suggested earlier. The default version of the starter has been rolled back now.

Or, if you still want to use this version with renderPageBody: when displaying content from a template, you need to add the jsxPath manually in the page controller.

In your example, the params argument object in renderPageBody should look like this:

renderPageBody({
    content,
    jsxPath: 'site/pages/default/default', 
})

This is pretty much the same code that comes with the [email protected] out of the box - but my comment about jsxPath being redundant and delete-able is clearly wrong and should be ignored. :slight_smile:

(by the way, when the jsxPath param is replaced with just {}, that must have produced a syntax error during the build? Sorry for not spotting this before)

8

Issue for this: https://github.com/enonic/lib-react4xp/issues/30

9

Recent react4xp updates are now able to render templates with connected content types, like described here. Take a look at starter-react4xp version 0.6.2 (also note the table of verified lib/package combinations. This is kind of a mess, fixing it is in the pipeline).

To see some usage examples of recent features, see these branches in the starter-react4xp repo: demo_css-modues-with-sass-and-chunked-assets and the slightly older demo2_gathered_version_with_regions.

Hope this is is useful! :sunny:

3 Likes