Adding support to Node 18 (#2065)

* feat: draft

* feat: draft2

* feat: fixed webpack on playground

* fix: playwright env

* fix: e2e testcafe

* fix: cleanup

.github/workflows/coveralls.yml

@@ -10,10 +10,10 @@ jobs:
     steps:
 
     - uses: actions/checkout@v3
-    - name: Use Node.js 16.x
+    - name: Use Node.js 18.x
       uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: 18.x
 
     - name: install, coverage
       run: |

.github/workflows/e2e.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
         # node-version: [16.x, 18.x, 19.x]
         # Currently 18 and 19 are not supported, still keeping it
         # as a reminder for compatibility check

.github/workflows/npm-publish.yml

@@ -16,7 +16,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - run: yarn install --frozen-lockfile
       # Copy README to adyen-web package

.github/workflows/unit-tests.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v3

.nvmrc

@@ -0,0 +1 @@
+v18.15.0

packages/e2e-playwright/app/config/webpack.config.js

@@ -1,5 +1,4 @@
 const webpack = require('webpack');
-const { merge } = require('webpack-merge');
 const path = require('path');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const checkoutDevServer = require('@adyen/adyen-web-server');
@@ -30,6 +29,11 @@ const entriesReducer = (acc, { id }) => {
 
 module.exports = {
     mode: 'development',
+
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
+    },
+
     plugins: [
         ...htmlPages.map(htmlPageGenerator),
         new webpack.HotModuleReplacementPlugin(),
@@ -40,20 +44,22 @@ module.exports = {
             }
         })
     ],
+
     devtool: 'cheap-module-source-map',
+
     entry: {
         ...htmlPages.reduce(entriesReducer, {})
     },
-    resolve: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
+
+    watchOptions: {
+        ignored: ['/node_modules/', '/!(@adyen/adyen-web/dist)/'],
+        aggregateTimeout: 200,
+        poll: 500
     },
-    stats: { children: false },
+
     module: {
         rules: [
             {
-                // "oneOf" will traverse all following loaders until one will
-                // match the requirements. When no loader matches it will fall
-                // back to the "file" loader at the end of the loader list.
                 oneOf: [
                     {
                         test: [/\.js?$/],
@@ -85,44 +91,18 @@ module.exports = {
             }
         ]
     },
+
     devServer: {
-        before: app => checkoutDevServer(app),
         port,
         host,
         https: false,
-        inline: true,
-
-        // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-        // for the WebpackDevServer client so it can learn when the files were
-        // updated. The WebpackDevServer client is included as an entry point
-        // in the Webpack development configuration. Note that only changes
-        // to CSS are currently hot reloaded. JS changes will refresh the browser.
         hot: true,
-
-        // Enable gzip compression of generated files.
         compress: true,
-
-        // Silence WebpackDevServer's own logs since they're generally not useful.
-        // It will still show compile warnings and errors with this setting.
-        clientLogLevel: 'none',
-
-        // Tells dev-server to suppress messages like the webpack bundle information.
-        // Errors and warnings will still be shown.
-        noInfo: true,
-
-        // By default files from `contentBase` will not trigger a page reload.
-        watchContentBase: false,
-
-        // Reportedly, this avoids CPU overload on some systems.
-        // https://github.com/facebook/create-react-app/issues/293
-        // src/node_modules is not ignored to support absolute imports
-        // https://github.com/facebook/create-react-app/issues/1065
-        watchOptions: {
-            ignore: [/node_modules/, /!(@adyen\/adyen-web\/dist)/],
-            aggregateTimeout: 200,
-            poll: 500
-        },
-
-        overlay: false
+        onBeforeSetupMiddleware: devServer => {
+            if (!devServer) {
+                throw new Error('webpack-dev-server is not defined');
+            }
+            checkoutDevServer(devServer.app);
+        }
     }
 };

packages/e2e-playwright/app/src/pages/Cards/Cards.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';

packages/e2e-playwright/app/src/pages/IssuerLists/IssuerLists.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';

packages/e2e-playwright/package.json

@@ -15,15 +15,15 @@
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "dotenv": "^16.0.2",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "5.5.0",
     "prettier": "^1.19.1",
     "sass-loader": "^10.2.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.1.0",
     "typescript": "^4.4.4",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "5.76.3",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.13.1"
   },
   "dependencies": {
     "@adyen/adyen-web": "5.39.0"

packages/e2e/app/config/webpack.config.js

@@ -1,5 +1,4 @@
 const webpack = require('webpack');
-const { merge } = require('webpack-merge');
 const path = require('path');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const checkoutDevServer = require('@adyen/adyen-web-server');
@@ -39,6 +38,11 @@ const entriesReducer = (acc, { id }) => {
 
 module.exports = {
     mode: 'development',
+
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
+    },
+
     plugins: [
         ...htmlPages.map(htmlPageGenerator),
         new webpack.HotModuleReplacementPlugin(),
@@ -49,20 +53,22 @@ module.exports = {
             }
         })
     ],
+
     devtool: 'cheap-module-source-map',
+
     entry: {
         ...htmlPages.reduce(entriesReducer, {})
     },
-    resolve: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
+
+    watchOptions: {
+        ignored: ['/node_modules/', '/!(@adyen/adyen-web/dist)/'],
+        aggregateTimeout: 200,
+        poll: 500
     },
-    stats: { children: false },
+
     module: {
         rules: [
             {
-                // "oneOf" will traverse all following loaders until one will
-                // match the requirements. When no loader matches it will fall
-                // back to the "file" loader at the end of the loader list.
                 oneOf: [
                     {
                         test: [/\.js?$/],
@@ -94,44 +100,18 @@ module.exports = {
             }
         ]
     },
+
     devServer: {
-        before: app => checkoutDevServer(app),
         port,
         host,
         https: false,
-        inline: true,
-
-        // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-        // for the WebpackDevServer client so it can learn when the files were
-        // updated. The WebpackDevServer client is included as an entry point
-        // in the Webpack development configuration. Note that only changes
-        // to CSS are currently hot reloaded. JS changes will refresh the browser.
         hot: true,
-
-        // Enable gzip compression of generated files.
         compress: true,
-
-        // Silence WebpackDevServer's own logs since they're generally not useful.
-        // It will still show compile warnings and errors with this setting.
-        clientLogLevel: 'none',
-
-        // Tells dev-server to suppress messages like the webpack bundle information.
-        // Errors and warnings will still be shown.
-        noInfo: true,
-
-        // By default files from `contentBase` will not trigger a page reload.
-        watchContentBase: false,
-
-        // Reportedly, this avoids CPU overload on some systems.
-        // https://github.com/facebook/create-react-app/issues/293
-        // src/node_modules is not ignored to support absolute imports
-        // https://github.com/facebook/create-react-app/issues/1065
-        watchOptions: {
-            ignore: [/node_modules/, /!(@adyen\/adyen-web\/dist)/],
-            aggregateTimeout: 200,
-            poll: 500
-        },
-
-        overlay: false
+        onBeforeSetupMiddleware: devServer => {
+            if (!devServer) {
+                throw new Error('webpack-dev-server is not defined');
+            }
+            checkoutDevServer(devServer.app);
+        }
     }
 };

packages/e2e/app/src/pages/Address/Address.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es/index.js';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import '../../style.scss';
 

packages/e2e/app/src/pages/Cards/Cards.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es/index.js';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';

packages/e2e/app/src/pages/CustomCards/CustomCards.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { handleSubmit, handleAdditionalDetails } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';

packages/e2e/app/src/pages/Dropin/Dropin.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { getPaymentMethods } from '../../services';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';

packages/e2e/app/src/pages/StoredCards/StoredCards.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es/index.js';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';

packages/e2e/package.json

@@ -28,16 +28,16 @@
         "cross-env": "^7.0.3",
         "css-loader": "^5.2.7",
         "dotenv": "^16.0.3",
-        "html-webpack-plugin": "^4.5.2",
+        "html-webpack-plugin": "5.5.0",
         "sass-loader": "^10.2.0",
         "source-map-loader": "^1.1.3",
         "style-loader": "^2.0.0",
         "testcafe": "^2.2.0",
         "ts-loader": "^8.1.0",
         "typescript": "^4.4.4",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.2",
+        "webpack": "5.76.3",
+        "webpack-cli": "5.0.1",
+        "webpack-dev-server": "4.13.1",
         "whatwg-fetch": "^3.6.2"
     },
     "dependencies": {

packages/lib/package.json

@@ -21,6 +21,7 @@
         },
         "./modern": "./dist/es.modern/index.js",
         "./dist/adyen.css": "./dist/adyen.css",
+        "./dist/es/adyen.css": "./dist/es/adyen.css",
         "./package.json": "./package.json"
     },
     "version": "5.39.0",

packages/playground/config/webpack.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-    resolve: {
-        mainFields: ['module', 'main'],
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
-    },
-    stats: { children: false },
-
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty',
-        child_process: 'empty'
-    }
-};

packages/playground/config/webpack.dev.js

@@ -1,8 +1,6 @@
 const webpack = require('webpack');
-const { merge } = require('webpack-merge');
 const path = require('path');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
-const webpackConfig = require('./webpack.config');
 const checkoutDevServer = require('@adyen/adyen-web-server');
 const host = process.env.HOST || '0.0.0.0';
 const port = process.env.PORT || '3020';
@@ -39,8 +37,13 @@ const entriesReducer = (acc, { id }) => {
     return acc;
 };
 
-module.exports = merge(webpackConfig, {
+module.exports = {
     mode: 'development',
+
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss']
+    },
+
     plugins: [
         ...htmlPages.map(htmlPageGenerator),
         new webpack.HotModuleReplacementPlugin(),
@@ -52,10 +55,19 @@ module.exports = merge(webpackConfig, {
             }
         })
     ],
+
     devtool: 'cheap-module-source-map',
+
     entry: {
         ...htmlPages.reduce(entriesReducer, {})
     },
+
+    watchOptions: {
+        ignored: ['/node_modules/', '/!(@adyen/adyen-web/dist)/'],
+        aggregateTimeout: 200,
+        poll: 500
+    },
+
     module: {
         rules: [
             {
@@ -102,44 +114,18 @@ module.exports = merge(webpackConfig, {
             }
         ]
     },
+
     devServer: {
-        before: app => checkoutDevServer(app),
         port,
         host,
         https: false,
-        inline: true,
-
-        // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-        // for the WebpackDevServer client so it can learn when the files were
-        // updated. The WebpackDevServer client is included as an entry point
-        // in the Webpack development configuration. Note that only changes
-        // to CSS are currently hot reloaded. JS changes will refresh the browser.
         hot: true,
-
-        // Enable gzip compression of generated files.
         compress: true,
-
-        // Silence WebpackDevServer's own logs since they're generally not useful.
-        // It will still show compile warnings and errors with this setting.
-        clientLogLevel: 'none',
-
-        // Tells dev-server to suppress messages like the webpack bundle information.
-        // Errors and warnings will still be shown.
-        noInfo: true,
-
-        // By default files from `contentBase` will not trigger a page reload.
-        watchContentBase: false,
-
-        // Reportedly, this avoids CPU overload on some systems.
-        // https://github.com/facebook/create-react-app/issues/293
-        // src/node_modules is not ignored to support absolute imports
-        // https://github.com/facebook/create-react-app/issues/1065
-        watchOptions: {
-            ignore: [/node_modules/, /!(@adyen\/adyen-web\/dist)/],
-            aggregateTimeout: 200,
-            poll: 500
-        },
-
-        overlay: false
+        onBeforeSetupMiddleware: devServer => {
+            if (!devServer) {
+                throw new Error('webpack-dev-server is not defined');
+            }
+            checkoutDevServer(devServer.app);
+        }
     }
-});
+};

packages/playground/package.json

@@ -27,7 +27,7 @@
         "cross-env": "^7.0.3",
         "css-loader": "^5.2.7",
         "dotenv": "^16.0.3",
-        "html-webpack-plugin": "^4.5.2",
+        "html-webpack-plugin": "5.5.0",
         "postcss": "^8.4.7",
         "postcss-loader": "^4.3.0",
         "sass-loader": "^10.2.0",
@@ -35,10 +35,9 @@
         "style-loader": "^2.0.0",
         "ts-loader": "^8.1.0",
         "typescript": "^4.4.4",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.2",
-        "webpack-merge": "^5.8.0",
+        "webpack": "5.76.3",
+        "webpack-cli": "5.0.1",
+        "webpack-dev-server": "4.13.1",
         "whatwg-fetch": "^3.6.2"
     },
     "dependencies": {

packages/playground/src/pages/Result/Result.js

@@ -1,4 +1,4 @@
-import AdyenCheckout from '@adyen/adyen-web/dist/es';
+import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { getSearchParameters } from '../../utils';
 import '../../../config/polyfills';