--- title: "Upgrade JSS apps to JSS 22.9" slug: "upgrade-jss-apps-to-jss-22-9" abstract: "How to upgrade your JavaScript Rendering SDKs to version 22.9 to benefit from the latest improvements." --- # Upgrade JSS apps to JSS 22.9 Sitecore JavaScript Rendering SDK version 22.9 requires you to make some modifications to your apps. > [!note] > **Before you begin** > - If you haven't already done so, [upgrade your app to JSS 22.8](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-8.html "Upgrade JSS apps to JSS 22.8"). > > - Familiarize yourself with the [JSS 22.9 release notes](https://github.com/Sitecore/jss/blob/6161999333adeef862eb5b84d1e1045b84df35b6/CHANGELOG.md#2290) to ensure you understand the implications of upgrading. > > - To update your JSS Next.js applications, follow the [upgrade guide from JSS 22.8 to 22.9 for JSS Next.js apps](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-8-next-js-apps-to-version-22-9.html "Upgrade JSS 22.8 Next.js apps to version 22.9") instead of this topic. This topic describes how to: 1. [Update Angular app](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm23511400384376 "Update Angular app") 2. [Update React app](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004007887 "Update React app") 3. [Update the Node headless SSR Experience Edge app](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004417531 "Update the Node headless SSR Experience Edge app") 4. [Update the Node headless SSR proxy app](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004151035 "Update the Node headless SSR proxy app") 5. [Update application dependencies](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004612828 "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: ```json "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: ```json "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.](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004612828 "Update application 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: ```json "@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: ```json "@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: ```text const { createProxyMiddleware } = require('http-proxy-middleware'); ``` - Replace it with the following: ```text 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: - Moving to Express 5 - [Migration guide for http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware/blob/master/MIGRATION.md#readme) - [Babel loader change log](https://github.com/babel/babel-loader/releases) - [Webpack CLI change log](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%406.0.0) 5. [Update your application's JSS package, and install dependencies.](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004612828 "Update application 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: ```json "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.](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004612828 "Update application 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: ```json "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: ```ts 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.](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-apps-to-jss-22-9.html#UUID-d4f0552a-1374-46b0-0596-192d2f03b3b9_section-idm235114004612828 "Update application 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: ```shell npm install ```