Skip to main content

Version: 24.04

Upgrade Journey Workspaces from 23.10 to 24.04

caution

Before upgrading to this release (24.04), you must first upgrade your application to Journey Workspaces 23.10.4 which introduced important security changes to the 23.10 release. To learn more, see Upgrade Journey Workspaces from 23.10.x to 23.10.4.

Overview​

There are no significant configuration differences between this Journey Workspaces release (24.04) and the previous Journey Workspaces release (23.10).

For more information about upgrades, see Upgrade to a new release.

note

When upgrading to Journey Workspaces 24.04, we recommended you upgrade to the 24.4.1 version which includes some important security fixes.

info

App templates in this release are not backward compatible with older Journey Manager releases due to Workspaces API changes in an earlier release.

Breaking Changes​

Journey Workspaces 24.4.1 introduces some breaking changes due to security fixes. The main changes are:

  • Some dependencies have been updated.
  • The initialization process in index.tsx has been modified to include monaco editor setup.

Ensure that your custom code is compatible with these changes.

Update package.json​

Make the following changes to your package.json file:

  • Update the @journey-ui/workspaces package version to 24.4.1.
  • Update the @journey-ui/workspaces-webpack-plugin package version to 24.4.1.

Here's a highlighted diff illustrating the required changes:

{
-  "name": "23.10.4",
+  "name": "24.4.1",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
-    "@journey-ui/workspaces": "^23.10.4",
+    "@journey-ui/workspaces": "^24.4.1",
-    "@journey-ui/workspaces-webpack-plugin": "^23.10.4",
+    "@journey-ui/workspaces-webpack-plugin": "^24.4.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^13.5.0",
-    "@transact-open-ux/cli": "^23.10.4",
+    "@transact-open-ux/cli": "^24.4.1",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   // ... rest of the file remains unchanged
 }

Update src/index.tsx​

Update your src/index.tsx file as shown below. This update introduces new imports for monaco editor, and initializes it accordingly.

/* eslint-env node */
+ import * as monaco from '@journey-ui/workspaces/build/ws/monaco-editor';
- import { pdfjs } from '@journey-ui/workspaces/build/ws/utils';
+ import { pdfjs, loader } from '@journey-ui/workspaces/build/ws/utils';
import App from '@journey-ui/workspaces/build/ws/App';
import reportWebVitals from './reportWebVitals';
import messages from './locales';
import transactConfig from '../transact-config.json';

pdfjs.GlobalWorkerOptions.workerSrc = './static/js/pdf.worker.min.mjs';

+ loader.config({ monaco });

+ loader.init();

const root = document.getElementById('root');

export default async function init() {
  const { configPath } = transactConfig.appDef;

  // Vite uses import.meta.env.  Webpack uses process.env
  const NODE_ENV =
    typeof import.meta.env !== 'undefined' && import.meta.env.MODE
      ? import.meta.env.MODE
      : process.env.NODE_ENV;

  // dynamically get config
  const { default: configs } = await import(/* @vite-ignore */ `./configs/${configPath}/index.ts`);

  // get fixtures only on development
  if (NODE_ENV === 'development') {
    const { default: fixtures } = await import(
      /* @vite-ignore */
      `./fixtures/${configPath}/index.ts`
    );
    const { default: makeServer } = await import('@journey-ui/workspaces/build/ws/Server');
    // start server
    makeServer({
      fixtures,
    });
  }
  // start only the client if production
  App(root, configs, messages, transactConfig.appDef);
}

init();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Post-upgrade steps​

After making all the above changes:

  • Update your dependencies:

    npm install

  • Test your application thoroughly to ensure all functionality works as expected.

If you encounter any issues, refer to the troubleshooting section in the documentation or contact support.