Enable FEaaS Components in XM Cloud

Sitecore Components are designed to be modular, reusable, and customizable, allowing users to create websites quickly and easily by combining and configuring these components in different ways.

If you are trying Sitecore Components in early access and you started your xm cloud project before Sitecore Components, early access were released and when you try to add a component in your xm cloud site. You see an error that said: “The component cannot be dropped into this placeholder”. It is necessary that you update your solution from https://github.com/sitecorelabs/xmcloud-foundation-head

If you are starting a new project you can skip this quick tutorial, because FEaaSWrapper already exists into the starter kit.

Step 1: Verify that FEaaSWrapper.tsx exists under components folder

The easy way to fetch this files is to pull the latest from xmcloud-foundation-head (master) branch.

Otherwise, create a new file FEaaSWrapper.ts and copy the content with

https://github.com/sitecorelabs/xmcloud-foundation-head/blob/main/src/sxastarter/src/components/FEaaSWrapper.tsx

import { FEaaSComponent, FEaaSComponentProps } from '@sitecore-jss/sitecore-jss-nextjs';
import React from 'react';

export const Default = (props: FEaaSComponentProps): JSX.Element => {
  const styles = `component feaas ${props.params?.styles}`.trimEnd();
  const id = props.params?.RenderingIdentifier;

  return (
    <div className={styles} id={id ? id : undefined}>
      <div className="component-content">
        <FEaaSComponent {...props} />
      </div>
    </div>
  );
};

Step 2: Verify that you have FEaaS Available Renderings item

As I mentioned if your solution does not have FEaaS out-of-the-box it is probably that your solution is out-to-date.

To fix this you can right-click and add Available Renderings item and name it “FEaaS”

Finally all you need to do is add FEaaS Wrapper component as Available Rendering which is located in the following path: /sitecore/layout/Renderings/Foundation/JSS Experience Accelerator/FEaaS/FEaaS Wrapper

Right now if you go back to Sitecore Pages and try to add FEaaS Componet you are able to do it.

Read more

[Workaround] XM Cloud: Error building sample Next.js app

I started an XM Cloud project using Next.js as Rendering Host. I added some Graphql code, but when I want to run jss build I got an error similar to the next one. https://sitecore.stackexchange.com/questions/33141/error-during-build-of-sample-next-js-app

./src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx:114:72
Type error: Argument of type 'TypedDocumentNode<ConnectedDemoQueryQuery, Exact<{ datasource: string; contextItem: string; language: string; }>>' is not assignable to parameter of type 'string | DocumentNode'.
  Type 'TypedDocumentNode<ConnectedDemoQueryQuery, Exact<{ datasource: string; contextItem: string; language: string; }>>' is not assignable to type 'DocumentNode'.
    Types of property 'kind' are incompatible.
      Type '"Document"' is not assignable to type 'Kind.DOCUMENT'.

Environment

  • @sitecore-jss/sitecore-jss-nextjs: "^21.0.0"
  • @sitecore-jss/sitecore-jss-cli: "^21.0.0"
  • XM Cloud

After some research I found a workaround. I know this is not the best solution. But if someone else know how to fix this issue please, feel free to leave a comment.

Workaround

In order to stop the type error, I wrap the Graphql call into a js file. index.js

 export async function myFunctionToExecuteQuery
{
.... some code here
 const result = await graphQLClient.request(MyQueryDocument, {
    myParam: myParam,
  });

return result;
}

Then I added an index.d.ts to declare the types.

export declare async function myFunctionToExecuteQuery<TResult>(
  myParam: string
): Promise<TResult| null>;

With that workaround I can still declare the query result type, and also run jss build without any error.

As I mentioned, this is not the best solution, but I can build the Next.js application successfully.

Read more