Sitecore Stack Exchange is a question and answer site for developers and end users of the Sitecore CMS and multichannel marketing software. It only takes a minute to sign up.
Sign up to join this community
When I deploy a JSS Next.js application to Sitecore (XM Cloud on local container, Sitecore demo portal) I get the following error when I run my Next.js application on http://localhost:3000:
In text:
Server Error
Error: Valid value for rootItemId not provided and failed to auto-resolve app root item.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Using JSS version 20.1.3
How can this error be prevented?
Both the dictionary service and the sitemap service need a root item ID. This root item ID must be configured in two files:
<jss-app>\src\lib\dictionary-service-factory.ts<jss-app>\src\lib\sitemap-fetcher\plugins\graphql-sitemap-service.tsIn both files, the comments described how to solve the issue.
For <jss-app>\src\lib\dictionary-service-factory.ts:
For <jss-app>\src\lib\sitemap-fetcher\plugins\graphql-sitemap-service.ts:
And the GUID to be used is the template ID of the home item of your JSS app:
Assuming that you are getting this error with a Headless SXA site and wish to use the nextjs-multisite add-on, do not set the rootItemId for the GraphQLDictionaryService as the service will only resolve one of your sites. Instead do one of the following:
If your app is only going to be used with Headless SXA sites, update the GraphQLDictionaryService configuration in src\lib\dictionary-service-factory.ts with jssAppTemplateId: '9ed6640464c9412290e1869cb3cea566', as follows:
return new GraphQLDictionaryService({
endpoint: config.graphQLEndpoint,
apiKey: config.sitecoreApiKey,
siteName,
jssAppTemplateId: '9ed6640464c9412290e1869cb3cea566', // SXA "Headless Site" template ID
/*
The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
rootItemId: '{GUID}'
*/
})
If your app is going to be used for both Headless SXA sites and "vanilla" Headless Services sites, add the Headless Services App template (/sitecore/templates/Foundation/JavaScript Services/App) as a base template to the Headless SXA Headless Site template (/sitecore/templates/Foundation/JSS Experience Accelerator/Multisite/Headless Site).
This is the approach that the XM Cloud team has taken if you'd like to implement the "official" fix. This will of course require you to serialize and track the Headless Site template in your code repository.
For analysis of this, see this issue on GitHub: https://github.com/Sitecore/jss/issues/1556.
If your Sitecore instance has more than one JSS app, which is likely if you are working on XM Cloud, you will not be able to set the rootItemId as noted by Sitecore's comment
/*
The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
rootItemId: '{GUID}'
*/
To resolve ensure value is the same for the following things
Headless Site itemname and appName in your site's Next app package.jsonApplication Name in the Rendering Host (e.g. /sitecore/system/Settings/Services/Rendering Hosts/<YourSite>.Predefined application rendering host field of your Site's Site Grouping Item (e.g. ~/<Your Site>/Settings/Site Grouping/<Your Site>)Doing so will allow the rootItemId to be determined via GraphQL
I had this error when I decided to delete /sitecore/content/tenant-name/site-name/Home and removed all links. When I set up Start Item again in /sitecore/content/tenant-name/site-name/Settings/Site Grouping/site-name, the error gone.
