Fixed : Sitecore JSS error - the route does not have an explicitly specified ID

I was working on Sitecore JSS application in which I have created a route “BlogDetailsModule2” with below body

fields:

  pageTitle: My JSS Powered Blog

placeholders:

  jss-main:

  - componentName: BlogHeader

    fields:

      HeaderContent : My Sitecore JSS Powered Blog

      HeaderSubTitle :

                <a href="https://jss.sitecore.com/" class="text-light">Sitecore JSS</a> promises to be the way of the future.

  - componentName: BlogArticle

    fields:

      blogArticleList:

      - id: BlogPost-2     

I was referencing this route in my shareable item “Item2 (BlogPost-2)” as an internal link like

  blogpostInternalLink:

    href: /blogdetailsmodule2

    text: Read on              

During JSS content and dictionary deployment to Sitecore, I received below error as

Exception thrown while importing JSS app

Exception: System.InvalidOperationException

Message: The item /sitecore/content/my-first-jss-app/Content/BlogPostCollection/ContentListField/Item2 contains link field 'blogpostInternalLink' that refers to route '/blogdetailsmodule2', but the route does not have an explicitly specified ID. To be used as a link reference from another item, the /blogdetailsmodule2 route needs an explicit ID set using the 'id' property as an app-wide unique string such as 'blogdetailsmodule2', or a GUID value.

Solution:-

Open “data\routes\BlogDetailsModule2\en.yml” file and add line “id: SomeUniquePageName” at the starting of file as

id: BlogDetailsModule2

fields:

  pageTitle: My JSS Powered Blog

placeholders:

  jss-main:

Save this file.

After this change, I was successfully able to deploy my JSS application to my Sitecore instance by command “jss deploy app --includeContent --includeDictionary”.

 
Learning from this error fixed is that though page id is optional entry but always specify it in all routes yml files in Sitecore JSS application.