Upgrade Journey Applicants from 23.10.x to 23.10.4
Breaking changes
Journey Applicants 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.