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,
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.
The result is the following error displayed on the page:
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?