Upgrade JSS apps to JSS 22.4

Version: 22.x

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

Among other changes, the 22.4 release removes the Axios dependency from all core @sitecore-jss packages. The dependency was deeply ingrained in core JSS functionality, and its removal provides greater flexibility in how your JSS app can communicate with Sitecore, be that via native node fetch, some alternative fetch library, or one of the latest versions of Axios including current security fixes and features.

Note

For a full summary of the changes relating to removal of Axios as the default fetcher, refer to the related changelog entry.

Before you begin

This topic describes how to:

  1. Update Angular apps 

  2. Update React apps 

  3. Update Vue.js apps 

  4. Update application dependencies 

Note

To update your JSS Next.js applications, follow the detailed upgrade guide from JSS 22.3 to 22.4 for JSS Next.js apps instead of this topic.

Update Angular apps

To update your Angular applications:

  1. Replace all Axios import statements, where present, as follows:

    Existing import

    Replacement import

    AxiosDataFetcher

    NativeDataFetcher

    AxiosResponse

    NativeDataFetcherResponse

    AxiosDataFetcherConfig

    NativeDataFetcherConfig

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

Update React apps

To update your React applications:

  1. Throughout your application (except src/dataFetcher.js), replace all Axios import statements as follows:

    Existing import

    Replacement import

    AxiosDataFetcher

    NativeDataFetcher

    AxiosResponse

    NativeDataFetcherResponse

    AxiosDataFetcherConfig

    NativeDataFetcherConfig

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

Additionally, if you want to switch your data fetch logic from Axios to the JSS native implementation (based on Node.js in-built logic), make the following changes:

  1. In server/server.js, do the following:

    • Remove the Axios import statement:

      RequestResponse
      import axios from 'axios';

    • Locate the following export statement:

      RequestResponse
      export const setUpDefaultAgents = (httpAgent, httpsAgent) => {
  ...
};

    • Delete the following lines from within that statement:

      RequestResponse
      axios.defaults.httpAgent = httpAgent;
axios.defaults.httpsAgent = httpsAgent;

  2. In src/dataFetcher.js, do the following:

    • Locate the AxiosFetcher import statement.

    • Delete that statement and replace it with the following:

      RequestResponse
      import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss-react';

    • Locate the dataFetcher function.

    • Delete that function and replace it with the following:

      RequestResponse
      export async function dataFetcher(url, data) {
  const fetcher = new NativeDataFetcher({ credentials: 'include' });
  const response = await fetcher.fetch(url, {
    method: data ? 'POST' : 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    body: data ? JSON.stringify(data) : undefined,
  });
  return response.data;
}

  3. In package.json, do the following:

    1. Delete the following dependency:

      RequestResponse
      "axios": "^1.2.3",

    2. Apply the change with npm install.

Update Vue.js apps

To update your Vue.js applications:

  1. Throughout your application (except src/dataFetcher.js), replace all Axios import statements as follows:

    Existing import

    Replacement import

    AxiosDataFetcher

    NativeDataFetcher

    AxiosResponse

    NativeDataFetcherResponse

    AxiosDataFetcherConfig

    NativeDataFetcherConfig

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

Additionally, if you want to switch your data fetch logic from Axios to the JSS native implementation (based on Node.js in-built logic), make the following changes:

  1. In server/server.js, do the following:

    • Remove the Axios import statement:

      RequestResponse
      import axios from 'axios';

    • Locate the following export statement:

      RequestResponse
      export const setUpDefaultAgents = (httpAgent, httpsAgent) => {
  ...
};

    • Delete the following lines from within that statement:

      RequestResponse
      axios.defaults.httpAgent = httpAgent;
axios.defaults.httpsAgent = httpsAgent;

  2. In src/dataFetcher.js, do the following:

    • Locate the Axios import statement.

    • Delete that statement and replace it with the following:

      RequestResponse
      import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss-vue';

    • Locate the dataFetcher function.

    • Delete that function and replace it with the following:

      RequestResponse
      export async function dataFetcher(url, data) {
  const fetcher = new NativeDataFetcher({ credentials: 'include' });
  const response = await fetcher.fetch(url, {
    method: data ? 'POST' : 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    body: data ? JSON.stringify(data) : undefined,
  });
  return response.data;
}

  3. In package.json, do the following:

    1. Delete the following dependency:

      RequestResponse
      "axios": "^1.2.3",

    2. Apply the change with npm install.

Update application dependencies

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

To update your dependencies:

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

  2. Install the dependencies with the following command:

    RequestResponse
    npm install

Do you have some feedback for us?

If you have suggestions for improving this article,