Upgrade Journey Workspaces from 23.10.x to 23.10.4

Breaking changes

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

• The webpack configuration has been simplified and now uses a custom plugin.
• Some dependencies have been updated or removed.
• The initialization process in index.tsx has been modified to include PDF.js setup.

If you have any custom webpack configurations or are using the removed dependencies, you may need to refactor your code accordingly.

craco.config.js

In the 23.10.4 release, craco.config.js has been simplified with the introduction of a new Webpack plugin called @journey-ui/workspaces-webpack-plugin.

The following changes are required:

• Remove the custom Webpack configuration related to stream-browserify. The 23.10.4 version of the @journey-ui/workspaces package no longer requires this workaround.

• Replace the existing Webpack configuration with the following:

  const JourneyUiPlugin = require('@journey-ui/workspaces-webpack-plugin');
  
  module.exports = {
      webpack: {
          plugins: [new JourneyUiPlugin()],
      }
  };

Here's a highlighted diff illustrating the required changes:

  module.exports = {
      webpack: {
-         configure: webpackConfig => {
-             const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
-                 ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
-             );
-
-             // Required for Webpack 5/ Node 18
-             const webpackConfigNode18 = {
-                 ...webpackConfig,
-                 resolve: {
-                     ...webpackConfig.resolve,
-                     fallback: {
-                         ...webpackConfig.resolve.fallback,
-                         stream: require.resolve("stream-browserify"),
-                     },
-                 },
-             };
-
-             webpackConfigNode18.resolve.plugins.splice(scopePluginIndex, 1);
-             return webpackConfigNode18;
-         }
      }
  };

+ const JourneyUiPlugin = require('@journey-ui/workspaces-webpack-plugin');
+ 
  module.exports = {
    webpack: {
+     plugins: [new JourneyUiPlugin()],
    }
  };

Update package.json

Make the following changes to your package.json file:

• Update the version of the @journey-ui/workspaces package to 23.10.4.
• Add the new dependency @journey-ui/workspaces-webpack-plugin with version 23.10.4.
• Remove stream-browserify from your dependencies.

Here's a highlighted diff illustrating the required changes:

{
-  "name": "23.10.0",
+  "name": "23.10.4",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
-    "@journey-ui/workspaces": "^23.4.0",
+    "@journey-ui/workspaces": "^23.10.4",
+    "@journey-ui/workspaces-webpack-plugin": "^23.10.4",
     "@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.4.0",
+    "@transact-open-ux/cli": "^23.10.4",
     "@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",
-    "stream-browserify": "^3.0.0",
     "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 a new import for PDF.js, and initializes it accordingly.

/* eslint-env node */
+ import { pdfjs } 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';

 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.