Page design does not work on SXA JSS sites created not from the nextjs-sxa template


Description

The content from the shared partial design might not be rendered on a page in React, Angular, Vue or Next.js-based JavaScript Services (JSS) applications not created from the nextjs-sxa template. The following errors can be found in the log records:

A rendering error occurred: Cannot read properties of underdefined (reading 'attributes')

 

PartialDesignDynamicPlaceholder
JSS component- is missing React implementation. See the developer console for more information.

 

The issue occurs because the PartialDesignDynamicPlaceholder JSS component is missing in non nextjs-sxa templates by default.

Solution

To resolve the issue, consider the following options:

Alternatively, for Next.js-based JSS applications, you can copy the PartialDesignDynamicPlaceholder  component from the nextjs-sxa  template to nextjs-styleguide  template.