Sitecore JSS placeholder issue on Route

Question

I am trying to create a new route using Sitecore 9.2 JSS. Below steps I have followed:

1. I have created a new Route i.e. Product.
2. Then I have created two new placeholders jss-header and jss-footer. (jss-main already exists) in placeholders.sitecore.js file

export default function addPlaceholdersToManifest(manifest) {
  manifest.addPlaceholder(
    { name: 'jss-header', displayName: 'Header' },
    { name: 'jss-main', displayName: 'Main' },
    { name: 'jss-footer', displayName: 'Footer' }
  );
}

3. In Layout.js, I have added placeholders

 <div className="container">
      <Placeholder name="jss-header" rendering={route} />
      <Placeholder name="jss-main" rendering={route} />
      <Placeholder name="jss-footer" rendering={route} />
    </div>

4. I have created new component of Header and Footer
5. In en.yml added data

id: product-page

# Route-level fields are appropriate for page level data like <title> contents
# Define route level fields in /sitecore/definitions/routes.sitecore
fields:
  title: Welcome to Sitecore JSS
# Define the page layout starting at the root placeholder - in this case, 'jss-main'
# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
placeholders:
  jss-header:
    - componentName: Header
      fields:
        heading: This is a header
  jss-main:
    - componentName: ContentBlock
      fields:
        heading: Welcome to Sitecore JSS
  jss-footer:
    - componentName: Footer
      fields:
        heading: This is a footer

Now when I am deploying the app using this command jss deploy app --includeContent --includeDictionary, I can see the page but the issue is that I can not see placeholder of jss-header and jss-footer, I can see jss-main component in experience editor.

Answer 1

Make sure your top level placeholders have been added to rootPlaceholders setting in package.json file:

{
  ...
  "config": {
    "appName": "myApp",
    "rootPlaceholders": [
      "jss-main",
      "jss-header",
      "jss-footer"
    ]
  },
  ...
}

Unless the root level placeholders are set, the placeholders and their components do not render in Experience Editor or normal mode.