Update NodeJS to v20 #4264

diegocurbelo · 2025-04-25T13:00:41Z

Fixes STRIPE-<linear_issue_id>
Fixes #<github_issue_id>

Changes proposed in this Pull Request:

This PR updates NodeJS from version v16 to v20.

Updates the dependencies
Updates the dev dependencies
Migrate Webpack configuration from v4 to v5
Fix jest tests
Fix build warnings (SASS/SCSS deprecation warnings)
Fix linting rules

Testing instructions

Covered with tests (or have a good reason not to test in description ☝️)
Tested on mobile (or does not apply)

Changelog entry

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Comment

Comment

Post merge

Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
Added the needs docs label (or does not apply)
Included this PR in the Release Thread scope (or does not apply)

diegocurbelo · 2025-04-28T04:47:11Z

.npmrc

@@ -1,2 +1,5 @@
-legacy-peer-deps=true
-engine-strict=true
+save-exact = true


Config copied from Guteberg

diegocurbelo · 2025-04-28T04:47:23Z

.prettierrc.js

+module.exports = {
+	...require( '@wordpress/prettier-config' ),
+	overrides: [
+		{
+			files: [ 'changelog.txt' ],
+			options: { parser: 'markdown' },
+		},
+	],
+};


Config copied from Guteberg

diegocurbelo · 2025-04-28T04:50:01Z

bin/update-pot-file-references.php

@@ -89,7 +89,7 @@ function load_js_transpiling_source_maps(): array {
 		}

 		foreach ( $file_json[ 'sources' ] as $source ) {
-			$source = preg_replace( '%^webpack:///\./(client/.*)$%', '${1}', $source );
+			$source = preg_replace( '%^webpack://\./(client/.*)$%', '${1}', $source );


In the Webpack 5 config, we are manually setting devtoolModuleFilenameTemplate, so we can replace the previous triple slash prefixes with normal URL-like paths webpack://[resource-path]

daledupreez · 2025-04-28T13:35:43Z

.eslintrc.js

+		'@wordpress/i18n-text-domain': [
+			'error',
+			{
+				allowedTextDomain: 'woocommerce-gateway-stripe',
+			},
+		],


@wordpress/i18n-text-domain was reporting a lot of issues. I chose to specify our expected text domain, but we could also keep to the defaults.

daledupreez · 2025-04-28T13:36:26Z

.eslintrc.js

@@ -82,4 +88,5 @@ module.exports = {
 			'@wordpress/data',
 		],
 	},
+	ignorePatterns: [ 'phpunit-html/**' ],


I tripped over a local folder left over from testing and realised it should always be ignored for linting.

daledupreez · 2025-04-28T15:43:59Z

Progress

Linting

Linting is now working, but there are still 13 errors stemming from the following:

6 errors: React 18 deprecated ReactDOM.render() in favour of createRoot() (docs link). If someone wants to tackle that, feel free. 😁
5 errors: client/entrypoints/express-checkout/index.js is failing a @typescript-eslint/no-use-before-define rule because it looks like there are circular dependencies between some functions.
2 errors: client/data/payment-gateway/hooks.js and client/data/settings/hooks.js both claim to have unnecessary dependencies in the some hooks.

Javascript Unit Tests

Many JS tests are not even running, mostly due to one of the following three errors:

TypeError: Cannot read properties of undefined (reading 'zone')
TypeError: Cannot read properties of undefined (reading 'add')
TypeError: (0 , _data.createSelector) is not a function

For the first two errors, the root cause seems to be an issue relating to the interplay between moment and moment-timezone from within the @wordpress/date package, where we have multiple versions of the package in use across the dependency tree. 😐

The final error stems from an import of createSelector from @wordpress/data. Not sure how that's getting borked! 🙃

There are then a handful of what look like legitimate test failures. At least some are related to code trying to test async or delayed loading.

SASS warnings

It looks like we would be able to avoid some of these by updating @wordpress/scripts, but we may simply need to disable/silence the warnings for now. I'll explore whether we can update that tomorrow (unless someone else gets to it first).

…to-v20

daledupreez

Also, before I forget to note this, we almost certainly need to look at extracting some of these changes into smaller PRs that we can test and merge independently. Based on the work I did, I can think of a few areas that might qualify for this:

Switch from @import to @use in the SCSS files
Re-order some SCSS that was split by nested rules
Re-order some JS files to ensure that code is defined before it is used
Moving some dependencies to devDependencies (though they would still need to get their version bumped separately)
Remove some unnecessary React hook deps
There are a lot of linting changes that might be ignored/accepted by the older linter - if we can extract some of these out, this patch will be much more manageable

daledupreez · 2025-04-30T17:44:49Z

.npmrc

@@ -1,2 +1,5 @@
-legacy-peer-deps=true
-engine-strict=true
+save-exact = true


While working on various dependencies, I noticed that this results in the default ^ prefix for compatible versions being removed. I am not sure how I feel about that, but I wanted to flag it as a key side-effect.

daledupreez · 2025-04-30T17:45:11Z

.npmrc

-engine-strict=true
+save-exact = true
+engine-strict = true
+legacy-peer-deps = true


Do we still need this? Maybe something for a follow-up PR.

…to handle their own mocking

laurendavissmith · 2025-05-02T16:52:56Z

Pushed up my changes which don't resolve the jest issue but nudge things in the right direction. Individual tests are still handling too much of their own mocking which is causing a lot of headaches. The mocks setup needs to be rethought entirely and shift as much as possible to handling with global mocks and overrides in the test files only when absolutely necessary.

I also experimented with a jest-early-mocks.js file which can be configured in the the setupFiles part of the jest config. I didn't end up needing it but if you run into race conditions that can be a useful way out.

laurendavissmith · 2025-05-02T17:00:03Z

client/api/blocks.js

+	let data = normalizeOrderData( sourceEvent, paymentRequestType );
+	data = getRequiredFieldDataFromCheckoutForm( data );
+
+	return $.ajax( {


I haven't looked to see how this gets utilized but I don't love that we return a promise with no default error state. It forces every instance of createOrder to implement an error catch since there is no fallback.

github-actions · 2025-05-05T13:39:33Z

📈 PHP Unit Code Coverage Report

Package	Line Rate	Health
includes/abstracts/abstract-wc-stripe-payment-gateway.php	48%	❌
includes/admin/class-wc-rest-stripe-settings-controller.php	81%	✔
includes/admin/class-wc-stripe-settings-controller.php	21%	❌
includes/class-wc-stripe-apple-pay-registration.php	60%	➖
includes/class-wc-stripe-feature-flags.php	89%	✔
includes/class-wc-stripe-intent-controller.php	31%	❌
includes/compat/trait-wc-stripe-subscriptions.php	20%	❌
includes/payment-methods/class-wc-stripe-upe-payment-gateway.php	48%	❌
includes/payment-methods/class-wc-stripe-upe-payment-method-blik.php	41%	❌
includes/payment-methods/class-wc-stripe-upe-payment-method-cash-app-pay.php	67%	➖
includes/payment-methods/class-wc-stripe-upe-payment-method-cc.php	92%	✔
includes/payment-methods/class-wc-stripe-upe-payment-method-sepa.php	91%	✔
includes/payment-methods/class-wc-stripe-upe-payment-method.php	56%	❌
includes/payment-tokens/class-wc-stripe-payment-tokens.php	18%	❌
Summary	44% (7245 / 16298)	❌

diegocurbelo commented Apr 28, 2025

View reviewed changes

.npmrc

@@ -1,2 +1,5 @@

legacy-peer-deps=true

engine-strict=true

save-exact = true

Copy link

Member Author

diegocurbelo Apr 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Config copied from Guteberg

diegocurbelo commented Apr 28, 2025

View reviewed changes

Specify the --user argument to wp wc CLI calls before wc

16e0caa

daledupreez assigned daledupreez and diegocurbelo Apr 28, 2025

daledupreez reviewed Apr 28, 2025

View reviewed changes

daledupreez and others added 21 commits April 29, 2025 11:40

Merge branch 'develop' into update/e2e-setup-scripts

d6bedb7

Bump nodejs version to v20.19.1

04bbd9a

Update webpack config to v5

ad71d37

Fix babel configuration compat

bec8c7d

Update wp-prettier to 2.8.5 (used by woo)

23a4e52

Update @woocommerce/dependency-extraction-webpack-plugin

fd856cb

Update @wordpress/base-styles to 4.49.0

9ceabb1

Fix webpack 5 source map generation

4836e74

Replace wp-prettier with @wordpress/prettier-config

0740c53

Copy prettier config from gutenberg

14552aa

Update @wordpress/jest-preset-default

7efdb6a

Update eslint-plugin-prettier to fix linting runtime errors

1feb133

Add i18n text domain to @wordpress/i18n-text-domain config

fec00f4

Ignore phpunit-html/ directory for linting

93ded00

Remove old lint ignores

775279e

Fix type defs and linting

68bff0b

Linting changes for /tests/e2e/

4a184ed

Fix constant import in CashApp notice test

7c9f75a

Linting updates for client/[smart-checkout|stripe-utils|styles|utils]

0bec463

Linting fixes in client/api; includes function move

8b1f1a8

Linting updates in client/blocks/

2c82ed4

daledupreez and others added 5 commits April 30, 2025 09:27

Move @typescript-eslint/parser to devDepencies

398f0e7

Move @testing-library/react-hooks to devDependencies

0cf831f

Move @typescript-eslint/eslint-plugin to devDependencies

1a3d9f0

Merge upstream dev/update-nodejs-to-v20 into local dev/update-nodejs-…

35d0bc1

…to-v20

Merge branch 'develop' into dev/update-nodejs-to-v20

1482cc2

daledupreez reviewed Apr 30, 2025

View reviewed changes

Add more global mocks to reduce errors and need for individual tests …

a068088

…to handle their own mocking

Cleanup and better comments

89c54b9

laurendavissmith reviewed May 2, 2025

View reviewed changes

daledupreez added 19 commits May 5, 2025 12:34

Fix DisableConfirmationModal tests

85c8e22

Fix RemoveMethodConfirmationModal tests

04c8120

Fix ManualCaptureControl tests

6299c98

Fix DisplayOrderCustomizationNotice tests

27f0d6a

Fix PromotionalBanner tests

354f604

Fix ConnectStripeAccount tests

f0b4ccf

Fix AmazonPaySettingsSection tests

5b92371

Fix GeneralSettingsSection tests

27b4289

Fix PaymentRequestsSettingsSection tests

39dc563

Fix the other PaymentRequestsSettingsSection tests

72ba24f

Fix PaymentGatewaySection tests

12ee857

Fix Popover tests

ad11e06

Fix SaveSettingsSection tests

9e5ae58

Fix SavePaymentGatewaySection tests

086e697

Fix TestModeCheckbox tests

d0644d6

Fix CustomizePaymentMethod tests

9df9777

Fix AdvancedSettings tests

5388eaa

Fix AmazonPaySettingsSection tests

d4302c6

Merge branch 'develop' into dev/update-nodejs-to-v20

3b74ea7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update NodeJS to v20 #4264

Update NodeJS to v20 #4264

Uh oh!

diegocurbelo commented Apr 25, 2025 •

edited by daledupreez

Loading

Uh oh!

diegocurbelo Apr 28, 2025

Uh oh!

diegocurbelo Apr 28, 2025

Uh oh!

diegocurbelo Apr 28, 2025

Uh oh!

daledupreez Apr 28, 2025

Uh oh!

daledupreez Apr 28, 2025

Uh oh!

daledupreez commented Apr 28, 2025

Uh oh!

daledupreez left a comment

Uh oh!

daledupreez Apr 30, 2025

Uh oh!

daledupreez Apr 30, 2025

Uh oh!

laurendavissmith commented May 2, 2025

Uh oh!

laurendavissmith May 2, 2025

Uh oh!

github-actions bot commented May 5, 2025

Uh oh!

Uh oh!

Update NodeJS to v20 #4264

Are you sure you want to change the base?

Update NodeJS to v20 #4264

Uh oh!

Conversation

diegocurbelo commented Apr 25, 2025 • edited by daledupreez Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Testing instructions

Changelog entry

Comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

daledupreez commented Apr 28, 2025

Progress

Linting

Javascript Unit Tests

SASS warnings

Uh oh!

daledupreez left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

laurendavissmith commented May 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 5, 2025

📈 PHP Unit Code Coverage Report

Uh oh!

Uh oh!

diegocurbelo commented Apr 25, 2025 •

edited by daledupreez

Loading