Fixing Sitecore NextJS JSS Error: Valid Value For RootItemId Not Provided

Troubleshoot Sitecore NextJS JSS Error: Valid value for rootItemId not provided and failed to auto-resolve app root item.

Overview

This is an error my team came across on the rendering container while following: Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js.

            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.

            Call Stack
            GraphQLDictionaryService.
            file:///C:/app/node_modules/@sitecore-jss/sitecore-jss/dist/cjs/i18n/graphql-dictionary-service.js (93:23)
            Generator.next
            
            fulfilled
            file:///C:/app/node_modules/@sitecore-jss/sitecore-jss/dist/cjs/i18n/graphql-dictionary-service.js (5:58)
            runMicrotasks
            
            processTicksAndRejections
            node:internal/process/task_queues (96:5)
        

The Solution

The error message is very confusing because the Call Stack points you to your @sitecore-jss node_modules. But try looking in your rendering/../src/lib. If you can find dictionary-service-factory.ts, the solution is very simple as it basically tells you how to fix the issue: 

            import {
                DictionaryService,
                RestDictionaryService,
                GraphQLDictionaryService,
              } from '@sitecore-jss/sitecore-jss-nextjs';
              import config from 'temp/config';
              
              export class DictionaryServiceFactory {
                create(): DictionaryService {
                  return process.env.FETCH_WITH === 'GraphQL'
                    ? new GraphQLDictionaryService({
                        endpoint: config.graphQLEndpoint,
                        apiKey: config.sitecoreApiKey,
                        siteName: config.jssAppName,
                        /*
                          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}'
                        */
                      })
                    : new RestDictionaryService({
                        apiHost: config.sitecoreApiHost,
                        apiKey: config.sitecoreApiKey,
                        siteName: config.jssAppName,
                      });
                }
              }
              
              export const dictionaryServiceFactory = new DictionaryServiceFactory();              
        

It is telling you to add rootItemId GUID inside 'new GraphQLDictionaryService({})' because it was unable to resolve the GUID on its own. All you have to do is go to your Sitecore and fetch the GUID of your headless site and specify it here, like so:

            new GraphQLDictionaryService({
                endpoint: config.graphQLEndpoint,
                apiKey: config.sitecoreApiKey,
                siteName: config.jssAppName,
                rootItemId: '{1105B073-13EB-4E1A-A895-A1C9663EE902}',
                /*
                  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}'
                */
              })
        

Extra

To be extra vigilant, you should search for rootItemId: '{GUID}' in your rendering folder to see if any other files contain similar lines. In my case, src\lib\sitemap-fetcher\plugins\graphql-sitemap-service.ts contained the exact same comment telling me to manually specify rootItemId. This will likely prevent future errors.