No fields and placeholder received from Layout API on JSS

Question

I just started developing JSS applications last week and was using the JSS version 13 since our Sitecore version is 9.3 and look for some help with issues I encountered so far.

I tried to deploy sitecore-embedded-js-app as is to my instance by running jss deploy config, jss deploy files, jss deploy app -c -d and I got the config set to the appropriate paths. The templates, renderings, placeholder setting, and items were imported successfully.

However, when I checked the app in Experience Editor Preview I saw an error that says A rendering error occurred: Cannot read properties of undefined (reading 'data'). Upon checking, I saw no properties inside the fields object of the route props. The script breaks on the Wizard.js' render function: const childSteps = rendering.fields.data.item.children;

{
 databaseName: "master",
 displayName: "Wizard",
 fields: {},
 itemVersion: 1,
 name: "wizard",
 placeholders: {,…},
 templateName: "EmbeddedWizard Route",
}

What could be the cause of this?

Secondly, when I check the app on web (or even when I run it on Connected mode), I get a blank page. Upon inspection, the API is not returning a list of placeholders. I have tried everything from republishing, renaming the placeholder key, to indexing the content tree but neither of these fixed the issue. On debug, I encounter an error that says:

Placeholder 'jss-main1' was not found in the current rendering data{
 databaseName: "web",
 displayName: "Wizard",
 fields: {},
 itemVersion: 1,
 name: "wizard",
 placeholders: {},
 templateName: "EmbeddedWizard Route",
}

Has anyone encountered these issues as well? Any ideas on how to solve this would be great.

EDIT: Included the breaking code for the missing data property

Answer 1

The first issue seems to be known, see the full list here, so I suggest to contact Sitecore Support for any available patches for your specific version.

The second problem typically occurs when a component is inserted into a non existing placeholder, therefore, I suggest to check on the following things:

• Ensure that your placeholder definition has been added to the manifest via

addPlaceholder(...templates: template[])

• Make sure that component definition is present correctly in the manifest

addComponent({
    name: 'SomeComponent',
    placeholders: ['jss-main1']
  });

• Review the route data, it should be aligned with your placeholder & component definition, for example, /data/component-content/SomeComponent/someid/en.yml

id: someid
fields:
  pageTitle: Some page title
placeholders:
  jss-main1:
  - componentName: SomeComponent
...

• Double check that the component has been created with the correct placeholder at a code level