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:
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?
