Upgrade Journey Applicants from 23.10 to 24.04
caution
Overview
There are some significant configuration differences between this Journey Applicants release (24.04) and the previous Journey Applicants release (23.10).
For more information about upgrades, see Upgrade to a new release.
note
When upgrading to Journey Applicants 24.04, we recommended you upgrade to the 24.4.2 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 Applicants 24.4.2 introduces some breaking changes due to security fixes. The main changes are:
- The
craco.config.jsconfiguration has been updated. - Some dependencies on
package.jsonhave been removed and updated. - The initialization process in
src/index.tsxhas been modified to include monaco.js setup.
Ensure that your custom code is compatible with these changes.
craco.config.js
In the 24.04.2 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 24.04.2 version of the@journey-ui/workspacespackage 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
@journey-ui/workspacespackage version to 24.4.2. - Add the
@journey-ui/workspaces-webpack-pluginpackage version 24.4.2.
Here's a highlighted diff illustrating the required changes:
{
- "name": "23.10.7",
+ "name": "24.4.2",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^7.1.0",
- "@journey-ui/workspaces": "^23.10.7",
+ "@journey-ui/workspaces": "^24.4.2",
+ "@journey-ui/workspaces-webpack-plugin": "^24.4.2",
"@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.7",
+ "@transact-open-ux/cli": "^24.4.2",
"@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 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 =
document.currentScript?.src.replace(/[^/]+$/, '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 installTest 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.