Fix RemixJS issues; "process is not defined" & "Buffer is not defined" - discussion related https://github.com/remix-run/remix/discussions/4906

alternative_for_own_packages.js

// This is optional, only for building your own npm packages using those polyfills
// This is not useful to fix issues from external packages like web3 dependencies

import { Buffer } from "buffer"
import * as process from "process"

globalThis.Buffer = Buffer as unknown as BufferConstructor;
globalThis.process = process as unknown as NodeJS.Process;

// So only use this alternative if you don't want to use the below patch fix for RemixJS!

package.json

{
  "name": "remix-demo",
  "scripts": {
    "postinstall": "run-s postinstall:*",
    "postinstall:patch": "patch-package",
    "postinstall:remix": "remix setup node"
  },
  "dependencies": {
    "@remix-run/node": "1.17.1",
    "@remix-run/react": "1.17.1",
    "@remix-run/serve": "1.17.1",
    "remix": "1.17.1"
  },
  "devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@remix-run/dev": "1.17.1",
    "@remix-run/eslint-config": "1.17.1",
    "npm-run-all": "^4.1.5"
  }
}

patches_@remix-run+dev+1.17.1.patch

diff --git a/node_modules/@remix-run/dev/dist/compiler/css/compiler.js b/node_modules/@remix-run/dev/dist/compiler/css/compiler.js
index 5a80a1d..ad0689b 100644
--- a/node_modules/@remix-run/dev/dist/compiler/css/compiler.js
+++ b/node_modules/@remix-run/dev/dist/compiler/css/compiler.js
@@ -15,6 +15,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var module$1 = require('module');
 var esbuild = require('esbuild');
 var esbuildPluginsNodeModulesPolyfill = require('esbuild-plugins-node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var dependencies = require('../../dependencies.js');
 var loaders = require('../utils/loaders.js');
 var cssImports = require('../plugins/cssImports.js');
@@ -97,7 +98,7 @@ const createEsbuildConfig = ctx => {
       outputCss: true
     }), cssSideEffectImports.cssSideEffectImportsPlugin(ctx), cssImports.cssFilePlugin(ctx), absoluteCssUrlsPlugin.absoluteCssUrlsPlugin(), external.externalPlugin(/^https?:\/\//, {
       sideEffects: false
-    }), mdx.mdxPlugin(ctx), emptyModules.emptyModulesPlugin(ctx, /\.server(\.[jt]sx?)?$/), esbuildPluginsNodeModulesPolyfill.nodeModulesPolyfillPlugin(), external.externalPlugin(/^node:.*/, {
+    }), mdx.mdxPlugin(ctx), emptyModules.emptyModulesPlugin(ctx, /\.server(\.[jt]sx?)?$/), nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({ buffer: true, process: true }), esbuildPluginsNodeModulesPolyfill.nodeModulesPolyfillPlugin(), external.externalPlugin(/^node:.*/, {
       sideEffects: false
     })],
     supported: {
diff --git a/node_modules/@remix-run/dev/dist/compiler/js/compiler.js b/node_modules/@remix-run/dev/dist/compiler/js/compiler.js
index 35d0194..e8a2a08 100644
--- a/node_modules/@remix-run/dev/dist/compiler/js/compiler.js
+++ b/node_modules/@remix-run/dev/dist/compiler/js/compiler.js
@@ -16,6 +16,7 @@ var path = require('path');
 var module$1 = require('module');
 var esbuild = require('esbuild');
 var esbuildPluginsNodeModulesPolyfill = require('esbuild-plugins-node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var dependencies = require('../../dependencies.js');
 var loaders = require('../utils/loaders.js');
 var routes = require('./plugins/routes.js');
@@ -110,7 +111,7 @@ const createEsbuildConfig = (ctx, refs) => {
     hmr: ctx.options.mode === "development" && ctx.config.future.unstable_dev !== false
   }), cssImports.cssFilePlugin(ctx), absoluteCssUrlsPlugin.absoluteCssUrlsPlugin(), external.externalPlugin(/^https?:\/\//, {
     sideEffects: false
-  }), mdx.mdxPlugin(ctx), emptyModules.emptyModulesPlugin(ctx, /\.server(\.[jt]sx?)?$/), esbuildPluginsNodeModulesPolyfill.nodeModulesPolyfillPlugin(), external.externalPlugin(/^node:.*/, {
+  }), mdx.mdxPlugin(ctx), emptyModules.emptyModulesPlugin(ctx, /\.server(\.[jt]sx?)?$/), nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({ buffer: true, process: true }), esbuildPluginsNodeModulesPolyfill.nodeModulesPolyfillPlugin(), external.externalPlugin(/^node:.*/, {
     sideEffects: false
   }), {
     // TODO: should be removed when error handling for compiler is improved
diff --git a/node_modules/@remix-run/dev/dist/compiler/server/compiler.js b/node_modules/@remix-run/dev/dist/compiler/server/compiler.js
index ad30727..9a9751e 100644
--- a/node_modules/@remix-run/dev/dist/compiler/server/compiler.js
+++ b/node_modules/@remix-run/dev/dist/compiler/server/compiler.js
@@ -14,6 +14,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var esbuild = require('esbuild');
 var esbuildPluginsNodeModulesPolyfill = require('esbuild-plugins-node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var loaders = require('../utils/loaders.js');
 var cssModuleImports = require('../plugins/cssModuleImports.js');
 var cssSideEffectImports = require('../plugins/cssSideEffectImports.js');
@@ -72,6 +73,12 @@ const createEsbuildConfig = (ctx, refs) => {
     sideEffects: false
   })];
   if (ctx.config.serverPlatform !== "node") {
+    plugins.unshift(
+      nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({
+        buffer: true,
+        process: true
+      })
+    );
     plugins.unshift(esbuildPluginsNodeModulesPolyfill.nodeModulesPolyfillPlugin());
   }
   return {