Merge pull request Expensify#78559 from Expensify/Rory-FixRunWeb

[No QA] Use tsx instead of node for webpack

Author: roryabraham

desktop/start.ts

@@ -13,7 +13,7 @@ portfinder
     })
     .then((port) => {
         const devServer = `./scripts/start-dev-with-auto-restart.sh --port ${port} --env platform=desktop`;
-        const buildMain = 'webpack watch --config config/webpack/webpack.desktop.ts --config-name desktop-main --mode=development';
+        const buildMain = 'npx tsx ./node_modules/.bin/webpack-cli watch --config config/webpack/webpack.desktop.ts --config-name desktop-main --mode=development';
 
         const env = {
             PORT: port,

package-lock.json

@@ -29,9 +29,9 @@
     "web": "./scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server",
     "web-proxy": "ts-node web/proxy.ts",
     "web-server": "./scripts/start-dev-with-auto-restart.sh",
-    "build": "webpack --config config/webpack/webpack.common.ts --env file=.env.production && ts-node ./scripts/combine-web-sourcemaps.ts",
-    "build-staging": "webpack --config config/webpack/webpack.common.ts --env file=.env.staging && ts-node ./scripts/combine-web-sourcemaps.ts",
-    "build-adhoc": "webpack --config config/webpack/webpack.common.ts --env file=.env.adhoc && ts-node ./scripts/combine-web-sourcemaps.ts",
+    "build": "tsx ./node_modules/.bin/webpack-cli --config config/webpack/webpack.common.ts --env file=.env.production && tsx ./scripts/combine-web-sourcemaps.ts",
+    "build-staging": "tsx ./node_modules/.bin/webpack-cli --config config/webpack/webpack.common.ts --env file=.env.staging && tsx ./scripts/combine-web-sourcemaps.ts",
+    "build-adhoc": "tsx ./node_modules/.bin/webpack-cli --config config/webpack/webpack.common.ts --env file=.env.adhoc && tsx ./scripts/combine-web-sourcemaps.ts",
     "desktop": "./scripts/set-pusher-suffix.sh && ts-node desktop/start.ts",
     "desktop-build": "./scripts/build-desktop.sh production",
     "desktop-build-staging": "./scripts/build-desktop.sh staging",
@@ -62,7 +62,7 @@
     "storybook-build": "ENV=production storybook build -o dist/docs",
     "storybook-build-staging": "ENV=staging storybook build -o dist/docs",
     "gh-actions-build": "./.github/scripts/buildActions.sh",
-    "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.ts --env file=.env.production",
+    "analyze-packages": "ANALYZE_BUNDLE=true tsx ./node_modules/.bin/webpack-cli --config config/webpack/webpack.common.ts --env file=.env.production",
     "symbolicate:android": "npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map",
     "symbolicate:ios": "npx metro-symbolicate main.jsbundle.map",
     "symbolicate-release:ios": "./scripts/release-profile.ts --platform=ios",
@@ -365,6 +365,7 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
+    "tsx": "4.21.0",
     "type-fest": "4.35.0",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.45.0",

package.json

@@ -30,11 +30,11 @@ title "Bundling Desktop js Bundle Using Webpack"
 info " • ELECTRON_ENV: $ELECTRON_ENV"
 info " • ENV file: $ENV_FILE"
 info ""
-NODE_OPTIONS=--max-old-space-size=8192 npx webpack --config config/webpack/webpack.desktop.ts --env file=$ENV_FILE
+NODE_OPTIONS=--max-old-space-size=8192 npx tsx ./node_modules/.bin/webpack-cli --config config/webpack/webpack.desktop.ts --env file=$ENV_FILE
 
 title "Combining web sourcemaps"
 info ""
-ts-node scripts/combine-web-sourcemaps.ts --path="desktop/dist/www"
+tsx scripts/combine-web-sourcemaps.ts --path="desktop/dist/www"
 
 title "Building Desktop App Archive Using Electron"
 info ""

scripts/build-desktop.sh

@@ -15,10 +15,10 @@ run_wds () {
     # Check if platform is Desktop to determine open behavior
     if [[ "${WEBPACK_DEV_SERVER_ARGS[*]}" == *"--env platform=desktop"* ]]; then
         # For Desktop, always use --no-open since app is handled by Electron
-        node --expose-gc ./node_modules/.bin/webpack-dev-server --no-open "${WEBPACK_DEV_SERVER_ARGS[@]}" --config config/webpack/webpack.dev.ts
+        npx tsx --expose-gc ./node_modules/.bin/webpack-cli serve --no-open "${WEBPACK_DEV_SERVER_ARGS[@]}" --config config/webpack/webpack.dev.ts
     else
         # For Web, use the provided open flag
-        node --expose-gc ./node_modules/.bin/webpack-dev-server "$1" "${WEBPACK_DEV_SERVER_ARGS[@]}" --config config/webpack/webpack.dev.ts
+        npx tsx --expose-gc ./node_modules/.bin/webpack-cli serve "$1" "${WEBPACK_DEV_SERVER_ARGS[@]}" --config config/webpack/webpack.dev.ts
     fi
 }