0

We have a Sitecore JSS app that has been working for some time in both Disconnected and Connected mode, locally in Docker and hosted on Azure App Services. It runs in the CM environment, and on a Node instance that connects to the layout service on CD. The app is written in TypeScript and compiled to ES5.

We are using the following versions:

  • Sitecore 9.2
  • JSS 12
  • Node 14.18.1

We now have a need to get it running in Integrated mode instead of Connected mode, ie to enable server-side rendering.

There is documentation on Server-side rendering and integrated mode. The renderView function and WebPack library target is, and always has been, in place. The documentation says Experience Editor always uses Integrated mode. Our app is editable in Experience Editor, and using View Source I can see the HTML for components that is missing when I view the app outside of Experience Editor, therefore it is doing server-side rendering in that environment.

The documentation refers to renderings being of a new type, React JavaScript Rendering, but that doesn't exist in the JSS 12 package. JavaScript Rendering does, so I think it's a typo or a pre-release name that changed. Our renderings are all based on JSON Rendering, so I've created a new rendering based on that and pointing to our site header component. I've added it to the presentation details for a page, with the same data source as the version that works client-side.

However, the new rendering cannot find the JavaScript component. These are the settings for the new rendering:

settings for new JavaScript rendering

The result is the following error displayed on the page:

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JavaScriptRenderer: The module "C:\inetpub\wwwroot\dist\jss-app-name\server.bundle.js" has no export named "Header" Error: The module "C:\inetpub\wwwroot\dist\jss-app-name\server.bundle.js" has no export named "Header" at C:\Windows\TEMP\4d5muhtz.2mg:116:21 at IncomingMessage. (C:\Windows\TEMP\4d5muhtz.2mg:137:41) at IncomingMessage.emit (events.js:400:28) at endReadableNT (internal/streams/readable.js:1334:12) at processTicksAndRejections (internal/process/task_queues.js:82:21)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.Http.HttpNodeInstance.InvokeExport[T](NodeInvocationInfo invocationInfo)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.OutOfProcessNodeInstance.InvokeExport[T](String moduleName, String exportNameOrNull, Object[] args)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.InvokeExportWithPossibleRetry[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.InvokeExport[T](String moduleName, String exportedFunctionName, Object[] args)
   at Sitecore.JavaScriptServices.ViewEngine.Node.NodeRenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.PerformRender(TextWriter writer, IRenderEngine renderEngine, String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.Render(TextWriter writer)
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.ExecuteRenderer.Render(Renderer renderer, TextWriter writer, RenderRenderingArgs args)

It is finding the JS file, because I get a different error if the path is wrong. I've tried specifying every JS file in the application in case the component is in a different file, but I always get the same message.

The component is exported in the original TypeScript using export default Header;

Ultimately we want to get this working on the separate Node environment via the node-headless-ssr-proxy which is already working for us in Connected mode, but at first I'd be happy to get it working in the CM or CD environment. Because it's working in Experience Editor I believe the prerequisites are in place and it's just a matter of configuration somewhere. Can anyone suggest how it needs to be configured?

2 Answers 2

0

Please refer to below blog I am using SSR with ReactJS:-

https://sitecorewithsanjay.blogspot.com/2022/03/reactjs-and-sxa-with-sitecore-headless.html

1
  • 1
    It would be good if you add your detailed answer here because sometimes these blogs can be deleted or not accessible. Mar 30, 2022 at 7:14
0

It turns out that, at some point after adapting the sample app, we had removed some of the code that supported server-side rendering. I've been putting that back in and I'm now starting to see server-side rendering happening.

My solution therefore was to follow the instructions for creating a JSS app for an older version of Sitecore, and compare the sample app code that generates to our own.

In case that page vanishes the steps it lists are:

  1. Identify the correct JSS version for your Sitecore XP version (I used version 12 for Sitecore 9.2)
  2. Install the JSS CLI using npm i @sitecore-jss/sitecore-jss-cli@<version> (I already had this)
  3. Create the sample app with jss create my-jss-app react --branch release/12.0.0
  4. Change to the directory cd my-jss-app
  5. Run jss start

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.