Patch: Upgrade to node 22 and webpack 5

[jenbutongit]

Note

This template is designed to help both contributors and maintainers. It is a checklist to ensure all necessary
information is provided, and prompts contributors on any contribution guidelines they have missed.

Do not remove sections.
They are important for the review process and help maintainers ensure quality and good documentation across the
project.

Some checkboxes will not apply to every change, so feel free to leave them unchecked if they are not relevant.

Description

Context

Upgrading to latest version of node 22 across runner, designer, model, queue-model and submitter

Changes

• Update docker images to node:22-alpine
• Update babel configs removing anything that is already provided by node 22
• Update babel configs to target node 22
• Update to weback 5
  • file-loader is now asset/resource
  • mainFiles: ["index"] is needed to default to index.js if a module is imported without the file (mainly govuk-jsx/* components had this issue)
  • remove standard (linting/formatting) since it was unused and was pinning a vulnerable dep
  • upgrade dependencies in GHSA-2g4f-4pwh-qvx6 chain. ajv seemed to be the problem, which was used by older eslint and webpack plugin versions

Type of change

What is the type of change you are making?

• Chore or documentation (non-breaking change that does not add functionality)
• ADR (Architectural Decision Record, non-breaking change that documents or proposes a decision)
• Refactor (non-breaking change that improves code quality)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

PR title

PR titles should be prefixed with the type of change you are making, based on the README.md#versioning.
This is so that when performing a squash merge, the PR title is automatically used as the commit message.

Have you updated the PR title to match the type of change you are making?

• Yes
• No, I need help or guidance

Testing

Automated tests

Have you added automated tests?

• Yes, unit or integration tests
• Yes, end-to-end (cypress) tests
• No, tests are not required for this change
• No, I need help or guidance
• No (explain why tests are not required or can't be added at this time)
  • No additional functionality added, existing unit and e2e tests will suffice

Manual tests

Have you manually tested your changes?

• Yes
• No, manual tests are not required or sufficiently covered by automated tests

Have you attached an example form JSON or snippet for the reviewer in this PR?

• Yes
• No, any existing form can be used
• No, it is not required or not applicable

Steps to test

N/A

Documentation

Have you updated the documentation?

• Yes, I have updated ./docs for this change since additional explanation or steps to use/configure the feature is required
• Yes, I have added or updated an ADR for this change since it is large, complex, or has significant architectural implications
• Yes, I have added inline comments for hard-to-understand areas
• No, I am not sure if documentation is required
• No, documentation is not required for this change

Discussion

Warning

Large or complex changes may require discussion with the maintainers before they can be merged. If it has not yet been discussed, it may delay the review process

Have you discussed this change with the maintainers?

• Yes, I have discussed this change with the maintainers on slack, email or via GitHub issues
• Yes, this change is an ADR to help kick-off discussion
• No, this change is small and does not require discussion
• No, I am not sure if one is required

[Dashue]

Hi @jenbutongit, what's the latest on this and is it something I can help to get across the line?

[jenbutongit]

babel can probably be entirely removed now, node 22+ and ES2025 has all the features we use - but need to unpick our test suite (.transform.js hooks into babel and does additional transforms which I don't want to address in this PR tbh)

[jenbutongit]

Hi @jenbutongit, what's the latest on this and is it something I can help to get across the line?

Hey @Dashue - thanks for the nudge and the offer. I probably left it at the time due to the webpack/babel/eslint etc config changes required..!

They look to be sorted now - would you like to have a glance over the changes? otherwise I'll throw it up to community/other maintainers to review

[Dashue]

Hi Jen!

Looks good to me

Ran it locally on windows and hit an issue on startup with the designer

[0] ERROR in ./client/styles/index.scss
[0] Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
[0] TypeError: $ is not a function
[0]     at eval (webpack-internal:///../node_modules/core-js/modules/es.global-this.js:8:1)
[0]     at ../node_modules/core-js/modules/es.global-this.js (C:\dev\digital-form-builder-upstream\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[2].use[1]!C:\dev\digital-form-builder-upstream\node_modules\postcss-loader\dist\cjs.js!C:\dev\digital-form-builder-upstream\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[2].use[3]!C:\dev\digital-form-builder-upstream\designer\client\styles\index.scss:1492:1)
...
...
...
[0] webpack 5.104.1 compiled with 8 errors and 12 warnings in 23609 ms

- useBuiltIns: process.env.NODE_ENV === "test" ? false : "usage"
+ useBuiltIns: process.env.NODE_ENV === "test" ? false : "entry"

Tried the fix found in webpack/mini-css-extract-plugin#471 (comment) and it fixed it