Replace require with esm

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     babelrcRoots: [
         // Keep the root as a root
         '.'

webpack.analyze.js

@@ -1,8 +1,8 @@
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const { merge } = require('webpack-merge');
+import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { merge } from 'webpack-merge';
 
-const prod = require('./webpack.prod');
+import prod from './webpack.prod.js';
 
 const smp = new SpeedMeasurePlugin();
 
@@ -25,4 +25,4 @@ const exportedConfig = smp.wrap(config);
 
 exportedConfig.plugins[miniCssPluginIndex] = miniCssPlugin;
 
-module.exports = exportedConfig;
+export default exportedConfig;

webpack.common.js

@@ -1,12 +1,40 @@
-const fg = require('fast-glob');
-const path = require('path');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { DefinePlugin, IgnorePlugin } = require('webpack');
-const packageJson = require('./package.json');
+import fg from 'fast-glob';
+import path from 'path';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import webpack from 'webpack';
+import packageJson from './package.json' with { type : 'json' };
+import postcssPresetEnv from 'postcss-preset-env';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import ChildProcess from 'child_process';
+
+const __dirname = import.meta.dirname;
+
+const { DefinePlugin, IgnorePlugin } = webpack;
+
+const DEV_MODE = process.env.NODE_ENV !== 'production';
+
+const postcssOptions = {
+    plugins: [
+        // Explicitly specify browserslist to override ones from node_modules
+        // For example, Swiper has it in its package.json
+        postcssPresetEnv({ browsers: packageJson.browserslist }),
+        autoprefixer({ overrideBrowserslist: packageJson.browserslist }),
+        DEV_MODE ? null : cssnano({
+            presets: [
+                'default',
+                // Turn off `mergeLonghand` because it combines `padding-*` and `margin-*`,
+                // breaking fallback styles.
+                // https://github.com/cssnano/cssnano/issues/1163
+                // https://github.com/cssnano/cssnano/issues/1192
+                { mergeLonghand: false }
+            ] })
+    ]
+};
 
 const Assets = [
     'native-promise-only/npo.js',
@@ -20,10 +48,9 @@
     'libpgs/dist/libpgs.worker.js'
 ];
 
-const DEV_MODE = process.env.NODE_ENV !== 'production';
 let COMMIT_SHA = '';
 try {
-    COMMIT_SHA = require('child_process')
+    COMMIT_SHA = ChildProcess
         // eslint-disable-next-line sonarjs/no-os-command-from-path
         .execSync('git describe --always --dirty')
         .toString()
@@ -325,11 +352,7 @@
                             'css-loader',
                             {
                                 loader: 'postcss-loader',
-                                options: {
-                                    postcssOptions: {
-                                        config: path.resolve(__dirname, 'postcss.config.js')
-                                    }
-                                }
+                                options: { postcssOptions }
                             },
                             'sass-loader'
                         ]
@@ -340,11 +363,7 @@
                             'css-loader',
                             {
                                 loader: 'postcss-loader',
-                                options: {
-                                    postcssOptions: {
-                                        config: path.resolve(__dirname, 'postcss.config.js')
-                                    }
-                                }
+                                options: { postcssOptions }
                             },
                             'sass-loader'
                         ]
@@ -364,7 +383,7 @@
                 type: 'asset/resource'
             },
             {
-                test: require.resolve('jquery'),
+                test: /node_modules\/jquery\/dist\/jquery\.js$/,
                 loader: 'expose-loader',
                 options: {
                     exposes: ['$', 'jQuery']
@@ -374,4 +393,4 @@
     }
 };
 
-module.exports = config;
+export default config;

webpack.dev.js

@@ -1,8 +1,8 @@
-const { merge } = require('webpack-merge');
+import { merge } from 'webpack-merge';
 
-const common = require('./webpack.common');
+import common from './webpack.common.js';
 
-module.exports = merge(common, {
+export default merge(common, {
     // In order for live reload to work we must use "web" as the target not "browserslist"
     target: process.env.WEBPACK_SERVE ? 'web' : 'browserslist',
     mode: 'development',

webpack.prod.js

@@ -1,8 +1,8 @@
-const { merge } = require('webpack-merge');
+import { merge } from 'webpack-merge';
 
-const common = require('./webpack.common');
+import common from './webpack.common.js';
 
-module.exports = merge(common, {
+export default merge(common, {
     mode: 'production',
     entry: {
         ...common.entry,