1. Sitecore JavaScript Services SDK (JSS)

Upgrade JSS apps to JSS 22.9

Version:

Sitecore JavaScript Rendering SDK version 22.9 requires you to make some modifications to your apps.

Before you begin

This topic describes how to:

  1. Update Angular app

  2. Update React app

  3. Update the Node headless SSR Experience Edge app

  4. Update the Node headless SSR proxy app

  5. Update application dependencies

Update Angular app

To update your Angular application:

  1. In your existing application's package.json file:

    • Update the following dependencies to the specified versions:

      "core-js": "~3.45.0",
"graphql": "15.10.1",
...
"rxjs": "~7.8.2",
"tslib": "^2.8.1",
....
"chokidar": "^4.0.3",
...
"dotenv": "^17.2.1",
"dotenv-webpack": ^8.1.1"
...

    • Remove @types/jasminewd2 and protractor dependencies.

    • Remove the e2e script from the scripts section.

    • Add the following after devDependencies section:

      "overrides": {
    "request": {
      "form-data": "^2.5.5"
    }
}

      This addresses a vulnerability in one of the angular-webkit dependencies.

  2. Delete the e2e folder from your existing application.

  3. Update your application's JSS package, and install dependencies.

Update React app

To update your React application:

  1. In your existing application's package.json file:

    • Update the following dependencies to the specified versions:

      "@apollo/client": "^3.13.9",
...
"bootstrap": "^5.3.7",
"cross-fetch": "^4.1.0",
...
"graphql": "~16.11.0",
"i18next": "^22.5.1",
...
"serialize-javascript": "^6.0.2"
...
"@babel/core": "^7.28.0",
"@babel/eslint-parser": "^7.28.0",
...
"@babel/preset-env": "^7.28.0",
"@babel/preset-react": "^7.27.1",
"@babel/register": "~7.27.1",
....
"babel-loader": "~10.0.0",
...
"cross-env": "~10.0.0",
"cross-spawn": "^7.0.6",
"del-cli": "^6.0.0",
"dotenv": "^17.2.1",
...
"express": "^5.1.0",
"fs-extra": "^11.3.1",
...
"html-loader": "~5.1.0",
"http-proxy-middleware": "~3.0.5",
...
"webpack": "~5.101.0",
"webpack-cli": "~6.0.1"

    • Find the following dependencies:

      "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",

    • Replace it with the following:

      "@babel/plugin-transform-export-namespace-from": "^7.27.1",
"@babel/plugin-transform-private-property-in-object": "^7.27.1",

  2. In server/server.webpack.config.js, find the following plugins and update their references:

    Old

    New

    @babel/plugin-proposal-export-namespace-from

    @babel/plugin-transform-export-namespace-from

    @babel/plugin-proposal-private-methods

    @babel/plugin-transform-private-methods

    @babel/plugin-proposal-private-property-in-object

    @babel/plugin-transform-private-property-in-object

  3. In src/setupProxy.js, make the following updates to preserve the pre-upgrade http-proxy-middleware format:

    • Find the following:

      const { createProxyMiddleware } = require('http-proxy-middleware');

    • Replace it with the following:

      const { legacyCreateProxyMiddleware } = require('http-proxy-middleware');

    • Replace all mentions of createProxyMiddleware with legacyCreateProxyMiddleware.

  4. If you have any custom logic that uses express, http-proxy-middleware, babel-loader, or other dependencies mentioned in this guide, please refer to their corresponding guides:

  5. Update your application's JSS package, and install dependencies.

Update the Node headless SSR Experience Edge app

To update your Node headless SSR Experience Edge app:

  1. In your existing application's package.json file, update the following dependencies to the specified versions:

    "express": "~5.1.0",
"dotenv": "^17.2.1"
....
"@types/compression": "^1.8.1",
"@types/express": "^5.0.3",
...
"typescript": "~5.9.2"
...

  2. Update your application's JSS package, and install dependencies.

Update the Node headless SSR proxy app

To update your Node headless SSR proxy app:

  1. In your existing application's package.json file, update the following dependencies to the specified versions:

    "agentkeepalive": "^4.6.0",
...
"express": "~5.1.0",
"dotenv": "^17.2.1"
....
"@types/compression": "^1.8.1",
"@types/express": "^5.0.3",
...
"typescript": "~5.9.2"
...

  2. In src/index.ts:

    • Find the following:

      server.use(
  '*',
  headlessProxy.middleware(
    config.serverBundle.renderView,
    config,
    config.serverBundle.parseRouteUrl
  )
);

    • Replace it with the following:

      server.use(
  '/{*splat}',
  headlessProxy.middleware(
    config.serverBundle.renderView,
    config,
    config.serverBundle.parseRouteUrl
  )
);

  3. If you have custom logic in your proxy app that uses express, see Moving to Express 5.

  4. Update your application's JSS package, and install dependencies.

Update application dependencies

For your upgraded applications to work correctly, you must update JSS dependencies.

To update your JSS dependencies:

  1. In your existing application's package.json file, update every @sitecore-jss package to version ~22.9.0.

  2. Install the dependencies with the following command:

    npm install
If you have suggestions for improving this article, let us know!