refactor: esm webpack

package.json

@@ -330,11 +330,11 @@
     "vm-browserify": "1.1.2",
     "web-ext": "7.8.0",
     "web-ext-submit": "7.8.0",
-    "webpack": "5.89.0",
+    "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
-    "webpack-hot-middleware": "2.26.0",
+    "webpack-hot-middleware": "2.26.1",
     "webpack-shell-plugin": "0.5.0"
   },
   "resolutions": {

scripts/generate-manifest.js

@@ -1,7 +1,4 @@
-/**
- * @typedef {import('@schemastore/web-manifest').JSONSchemaForWebApplicationManifestFiles} Manifest
- */
-const deepMerge = require('deepmerge');
+import deepMerge from 'deepmerge';
 
 // Manifest can only be prod or dev
 const WALLET_ENVIRONMENT =
@@ -121,7 +118,7 @@ const prodManifest = {
   },
 };
 
-function generateManifest(packageVersion) {
+export default function generateManifest(packageVersion) {
   if (!packageVersion)
     throw new Error('Version number must be passed to `generateManifest` function');
 
@@ -139,5 +136,3 @@ function generateManifest(packageVersion) {
     environmentIcons[WALLET_ENVIRONMENT],
   ]);
 }
-
-module.exports = generateManifest;

tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "commonjs",
+    "module": "ESNext",
+    "moduleResolution": "node",
     "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "react-jsx",
     "sourceMap": true,
@@ -18,7 +19,6 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "baseUrl": "src",
     "paths": {

webpack/dev-server.js

@@ -1,15 +1,17 @@
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const WebpackDevServer = require('webpack-dev-server');
-const webpack = require('webpack');
-const path = require('path');
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import path from 'path';
+import * as url from 'url';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
 
+import { config } from './webpack.config.dev.js';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT;
 
 const HOST = 'localhost';
 const PORT = process.env.PORT || '8080';
 
-const config = require('./webpack.config.dev');
-
 // This is important bc it allows for fast refresh to work
 // We don't want to inject our fast refresh helpers into these entry points
 const excludeEntriesFromHotModuleReload = ['content-script', 'inpage'];
@@ -53,9 +55,9 @@ const server = new WebpackDevServer(
   compiler
 );
 
-if (WALLET_ENVIRONMENT === 'development' && module.hot) {
-  module.hot.accept();
-}
+// if (WALLET_ENVIRONMENT === 'development' && module.hot) {
+//   module.hot.accept();
+// }
 
 server.startCallback(() => {
   console.log('Starting server on http://localhost:8080');

webpack/webpack.config.base.js

@@ -1,19 +1,25 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const webpack = require('webpack');
-const { version: _version } = require('../package.json');
-const generateManifest = require('../scripts/generate-manifest');
-const Dotenv = require('dotenv-webpack');
-const GenerateJsonPlugin = require('generate-json-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+  import { execSync } from 'node:child_process';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import Dotenv from 'dotenv-webpack';
+import GenerateJsonPlugin from 'generate-json-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import ProgressBarPlugin from 'progress-bar-webpack-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import webpack from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import * as url from 'url';
+
+import packageJson from '../package.json' assert { type: 'json' };
+import generateManifest from '../scripts/generate-manifest.js';
+
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
 const SRC_ROOT_PATH = path.join(__dirname, '../', 'src');
 const DIST_ROOT_PATH = path.join(__dirname, '../', 'dist');
-const { execSync } = require('child_process');
 
 const WALLET_ENVIRONMENT = process.env.WALLET_ENVIRONMENT ?? 'development';
 const ANALYZE_BUNDLE = process.env.ANALYZE === 'true';
@@ -38,10 +44,12 @@ console.log({
   locallyExe: executeGitCommand('git rev-parse HEAD'),
 });
 
+const require = createRequire(import.meta.url);
+
 // For non main branch builds, add a random number
 const getVersionWithRandomSuffix = ref => {
-  if (ref === MAIN_BRANCH || !ref || IS_PUBLISHING) return _version;
-  return `${_version}.${Math.floor(Math.floor(Math.random() * 1000))}`;
+  if (ref === MAIN_BRANCH || !ref || IS_PUBLISHING) return packageJson.version;
+  return `${packageJson.version}.${Math.floor(Math.floor(Math.random() * 1000))}`;
 };
 const VERSION = getVersionWithRandomSuffix(BRANCH_NAME);
 
@@ -82,7 +90,7 @@ const aliases = {
   'leather-styles': path.resolve('leather-styles'),
 };
 
-const config = {
+export const config = {
   entry: {
     background: path.join(SRC_ROOT_PATH, 'background', 'background.ts'),
     inpage: path.join(SRC_ROOT_PATH, 'inpage', 'inpage.ts'),
@@ -260,13 +268,11 @@ const config = {
   },
 };
 
-module.exports = config;
-
-if (IS_PROD) {
-  module.exports.plugins.push(
-    new CleanWebpackPlugin({ verbose: true, dry: false, cleanStaleWebpackAssets: false })
-  );
-}
-if (ANALYZE_BUNDLE) {
-  module.exports.plugins.push(new BundleAnalyzerPlugin());
-}
+// if (IS_PROD) {
+//   module.exports.plugins.push(
+//     new CleanWebpackPlugin({ verbose: true, dry: false, cleanStaleWebpackAssets: false })
+//   );
+// }
+// if (ANALYZE_BUNDLE) {
+//   module.exports.plugins.push(new BundleAnalyzerPlugin());
+// }

webpack/webpack.config.dev.js

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const baseConfig = require('./webpack.config.base');
+import { config as baseConfig } from './webpack.config.base.js';
 
-const config = {
+export const config = {
   ...baseConfig,
   devtool: 'inline-source-map',
   mode: 'development',
@@ -19,5 +18,3 @@ const config = {
     splitChunks: false,
   },
 };
-
-module.exports = config;

webpack/webpack.config.prod.js

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const config = require('./webpack.config.base');
-const packageJson = require('../package.json');
-const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
-const webpack = require('webpack');
+import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
+import webpack from 'webpack';
+
+import packageJson from '../package.json';
+import config from './webpack.config.base';
 
 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
 
@@ -58,4 +59,4 @@ config.plugins = [
 
 config.devtool = false;
 
-module.exports = config;
+export default config;