JSSアプリをJSS 22.9にアップグレードする

Angularアプリの更新

Angularアプリケーションを更新するには:

1. 既存のアプリケーションのpackage.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" ...

   • @types/jasminewd2とprotractor依存関係を取り除く。

   • スクリプト欄からe2eスクリプトを削除してください。

   • devDependenciesセクションの後に以下を追加してください:

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

     これはangular-webkit依存関係の一つの脆弱性を解決します。

2. 既存のアプリケーションからe2eフォルダを削除してください。

3. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

Reactアプリの更新

Reactアプリケーションを更新するには:

1. 既存のアプリケーションのpackage.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"

   • 以下の依存関係を見つけてください:

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

   • 次のものに置き換えてください:

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

2. server/server.webpack.config.jsでは、以下のプラグインを見つけて参照を更新してください:

   古い

   新作

   @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. src/setupProxy.jsでは、アップグレード前の形式を維持するために以下の更新http-proxy-middlewareを行います。

   • 以下をご覧ください:

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

   • 次のものに置き換えてください:

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

   • createProxyMiddlewareに関する言及はすべて「legacyCreateProxyMiddleware」に置き換えてください。

4. もしexpress、http-proxy-middleware、babel-loader、またはこのガイドで言及されている他の依存関係を使ったカスタムロジックをお持ちの場合は、対応するガイドを参照してください。

   • エクスプレス5への移動
   • http-proxy-middlewareの移行ガイド
   • バベルローダーの変更ログ
   • Webpack CLIの変更ログ

5. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

NodeのヘッドレスSSR Experience Edgeアプリを更新してください

Node headless SSR Experience Edgeアプリのアップデート:

1. 既存のアプリケーションのpackage.jsonファイルで、以下の依存関係を指定されたバージョンに更新してください:

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

2. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

NodeのヘッドレスSSRプロキシアプリを更新してください

NodeのヘッドレスSSRプロキシアプリを更新するには:

1. 既存のアプリケーションのpackage.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. src/index.tsでは:

   • 以下をご覧ください:

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

   • 次のものに置き換えてください:

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

3. もしプロキシアプリにexpressを使うカスタムロジックがある場合は、「Express 5への移行」を参照してください。

4. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

アプリケーション依存関係の更新

アップグレードされたアプリケーションを正しく動作させるには、JSS依存関係を更新する必要があります。

JSS依存関係を更新するには:

1. 既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.9.0に更新してください。

2. 以下のコマンドで依存関係をインストールします:

   npm install