Upgrade Journey Workspaces from 23.10.x to 23.10.7

Breaking changes

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

• The craco.config.js configuration has been updated.
• Some dependencies on package.json have been added and updated.
• The initialization process in src/index.tsx has been modified to include PDF.js setup.

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

craco.config.js

In the 23.10.7 release, craco.config.js has been updated to use 'copy-webpack-plugin' to handle workers.

The following changes are required:

• Replace the existing craco configuration with the following:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const pdfWorkerPath = path.join(
  path.dirname(require.resolve('@journey-ui/workspaces/package.json')),
  'build',
  'ws',
  'pdf.worker.min.mjs'
);

module.exports = {
  webpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pdfWorkerPath,
            to: path.join(__dirname, 'build/static/js/'),
          },
        ],
      }),
    ],
    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;
    },
  },
};

Update package.json

Make the following changes to your package.json file:

• Update the version of the @journey-ui/workspaces package to 23.10.7.
• Update the version of the @transact-open-ux/cli package to 23.10.7.
• Add the new dependency copy-webpack-plugin with version 12.0.2.

Here's a highlighted diff illustrating the required changes:

{
-  "name": "23.10.0",
+  "name": "23.10.7",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
-    "@journey-ui/workspaces": "^23.10.0",
+    "@journey-ui/workspaces": "^23.10.7",
     "@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.0",
+    "@transact-open-ux/cli": "^23.10.7",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "copy-webpack-plugin": "^12.0.2",
     "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 =
+   document.currentScript?.src.replace(/[^/]+$/, '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.