1. Sitecore JavaScript Services SDK (JSS)

Upgrade JSS apps to JSS 21.7

Version:

Sitecore JavaScript Rendering SDK version 21.7 brings changes to JSS packages, other NPM dependencies, and some environment variables.

Before you begin

This topic describes how to:

Update dependencies in React apps

Upgrading your applications based on JSS templates requires changing some dependencies and replacing their usage.

To upgrade your applications:

  1. In your package.json file, update every @sitecore-jss dependency to use the ~21.7.0 version and replace the deep-equal dependency with fast-deep-equal version ^3.1.3.

  2. In a shell, install or update dependencies in your app by running the following command:

    npm install

  3. Update the /src/Layout.js file as follows:

    • Remove the deepEqual import statement.

    • Import the fastDeepEqual function from the newly added dependency:

      import fastDeepEqual from 'fast-deep-equal/es6/react';

    • Replace the usage of the deepEqual function with the fastDeepEqual function:

      if (fastDeepEqual(prevProps.route, nextProps.route)) return true;

Upgrade JSS Next.js apps to JSS 21.7

In JSS 21.7, Sitecore improved GraphQL retries and upgraded Next.js to version 14.

To upgrade JSS Next.js apps:

Update the Node headless SSR proxy app

In JSS 21.7, the Node headless SSR proxy template adds the sc_site query parameter to Layout Service requests.

To update your Node headless SSR proxy app:

  • In the /src/config.ts file, add query string parameters for Layout service requests using the qsParams configuration property, as follows:

    setHeaders: (_req, _serverRes, proxyRes) => {
    delete proxyRes.headers['content-security-policy'];
  },
  /**
* Query string parameters to add to Layout Service requests.
*/
qsParams: sc_site=${siteName},
//...
If you have suggestions for improving this article, let us know!