make webpack configs CommonJS-safe for Vercel builds

Author: evanpurkhiser

webpack.config.base.ts

@@ -4,11 +4,10 @@ import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
 
 import path from 'path';
-import {fileURLToPath} from 'url';
 
 import {commit, releaseChannel, releaseId} from './scripts/release.ts';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = process.cwd();
 
 export const IS_PROD = process.env.NODE_ENV === 'production';
 
@@ -34,7 +33,7 @@ export const baseConfig: webpack.Configuration = {
   mode: IS_PROD ? 'production' : 'development',
 
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(projectRoot, 'dist'),
     filename: '[name].js',
   },
   node: {
@@ -45,12 +44,12 @@ export const baseConfig: webpack.Configuration = {
   resolve: {
     extensions: ['.tsx', '.ts', '.js', '.ttf'],
     alias: {
-      src: path.resolve(__dirname, 'src/'),
-      main: path.resolve(__dirname, 'src/main/'),
-      ui: path.resolve(__dirname, 'src/renderer/'),
-      overlay: path.resolve(__dirname, 'src/overlay/'),
-      web: path.resolve(__dirname, 'src/website/'),
-      api: path.resolve(__dirname, 'src/api/'),
+      src: path.resolve(projectRoot, 'src/'),
+      main: path.resolve(projectRoot, 'src/main/'),
+      ui: path.resolve(projectRoot, 'src/renderer/'),
+      overlay: path.resolve(projectRoot, 'src/overlay/'),
+      web: path.resolve(projectRoot, 'src/website/'),
+      api: path.resolve(projectRoot, 'src/api/'),
     },
   },
   devtool: IS_PROD ? 'source-map' : 'eval-source-map',

webpack.config.overlay.ts

@@ -4,22 +4,21 @@ import webpack from 'webpack';
 import {merge} from 'webpack-merge';
 
 import path from 'path';
-import {fileURLToPath} from 'url';
 
 import {baseConfig, hotReloadPlugins} from './webpack.config.base.ts';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = process.cwd();
 
 const overlayConfig: webpack.Configuration = merge(baseConfig, {
   entry: {
     overlay: './src/overlay/app.tsx',
   },
   output: {
-    path: path.resolve(__dirname, 'dist/overlay'),
+    path: path.resolve(projectRoot, 'dist/overlay'),
     publicPath: '/',
   },
   devServer: {
-    contentBase: path.join(__dirname, 'dist/overlay'),
+    contentBase: path.join(projectRoot, 'dist/overlay'),
     historyApiFallback: true,
     port: 2005,
     hot: true,

webpack.config.renderer.ts

@@ -4,11 +4,10 @@ import webpack from 'webpack';
 import {merge} from 'webpack-merge';
 
 import path from 'path';
-import {fileURLToPath} from 'url';
 
 import {baseConfig, hotReloadPlugins, IS_PROD} from './webpack.config.base.ts';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = process.cwd();
 
 const rendererConfig: webpack.Configuration = merge(baseConfig, {
   target: 'electron-renderer',
@@ -17,7 +16,7 @@ const rendererConfig: webpack.Configuration = merge(baseConfig, {
     sentry: './src/shared/sentry/renderer.ts',
   },
   devServer: {
-    contentBase: path.join(__dirname, 'dist'),
+    contentBase: path.join(projectRoot, 'dist'),
     historyApiFallback: true,
     port: 2003,
     hot: true,

webpack.config.website.ts

@@ -4,22 +4,21 @@ import webpack from 'webpack';
 import {merge} from 'webpack-merge';
 
 import path from 'path';
-import {fileURLToPath} from 'url';
 
 import {baseConfig, hotReloadPlugins} from './webpack.config.base.ts';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = process.cwd();
 
 const websiteConfig: webpack.Configuration = merge(baseConfig, {
   entry: {
     app: './src/website/app.tsx',
   },
   output: {
-    path: path.resolve(__dirname, 'dist/website'),
+    path: path.resolve(projectRoot, 'dist/website'),
     publicPath: '/',
   },
   devServer: {
-    contentBase: path.join(__dirname, 'dist/website'),
+    contentBase: path.join(projectRoot, 'dist/website'),
     historyApiFallback: true,
     port: 2004,
     hot: true,