Avoid using NodeJS packages from Browser

[jdnichollsc]

Hello folks, hope you're doing well

In my company we're trying to use your product Web3Auth but we're getting errors integrating @web3auth packages with RemixJS, inspecting your dependencies you're using NodeJS modules like pump, so I was wondering if you're planning to support SSR with these Frameworks.

Error logs:

index.js:6 Uncaught ReferenceError: process is not defined
    at ../../node_modules/@toruslabs/openlogin-jrpc/node_modules/pump/index.js (index.js:6:29)
    at __require2 (chunk-ZMEXVS3E.js:47:50)
    at randomId.ts:3:39

BTW, Why are you using NodeJS packages from the browser? Good to know!

Thanks for your help! <3

[jdnichollsc]

Hello folks, we were able to fix errors loading process and Buffer NodeJS variables from the Browser using the below patch with RemixJS:

diff --git a/node_modules/@remix-run/dev/compiler.js b/node_modules/@remix-run/dev/compiler.js
index 9ce96d5..9c000b0 100644
--- a/node_modules/@remix-run/dev/dist/compiler.js
+++ b/node_modules/@remix-run/dev/dist/compiler.js
@@ -18,7 +18,9 @@ var esbuild = require('esbuild');
 var fse = require('fs-extra');
 var debounce = require('lodash.debounce');
 var chokidar = require('chokidar');
-var nodeModulesPolyfill = require('@esbuild-plugins/node-modules-polyfill');
+var NodeGlobalsPolyfillPlugin = require('@esbuild-plugins/node-globals-polyfill').NodeGlobalsPolyfillPlugin;
+var NodeModulesPolyfillPlugin = require('@esbuild-plugins/node-modules-polyfill').NodeModulesPolyfillPlugin;
+
 var esbuildPluginPnp = require('@yarnpkg/esbuild-plugin-pnp');
 var build$1 = require('./build.js');
 var config = require('./config.js');
@@ -309,7 +311,7 @@ async function createBrowserBuild(config, options) {
     entryPoints[id] = config.routes[id].file + "?browser";
   }

-  let plugins = [urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), browserRouteModulesPlugin.browserRouteModulesPlugin(config, /\?browser$/), emptyModulesPlugin.emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/), nodeModulesPolyfill.NodeModulesPolyfillPlugin(), esbuildPluginPnp.pnpPlugin()];
+  let plugins = [NodeGlobalsPolyfillPlugin({buffer: true, process: true}), NodeModulesPolyfillPlugin(), urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), browserRouteModulesPlugin.browserRouteModulesPlugin(config, /\?browser$/), emptyModulesPlugin.emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/), esbuildPluginPnp.pnpPlugin()];
   return esbuild__namespace.build({
     entryPoints,
     outdir: config.assetsBuildDirectory,
@@ -359,7 +361,8 @@ function createServerBuild(config, options, assetsManifestPromiseRef) {
   let plugins = [urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), emptyModulesPlugin.emptyModulesPlugin(config, /\.client(\.[jt]sx?)?$/), serverRouteModulesPlugin.serverRouteModulesPlugin(config), serverEntryModulePlugin.serverEntryModulePlugin(config), serverAssetsManifestPlugin.serverAssetsManifestPlugin(assetsManifestPromiseRef), serverBareModulesPlugin.serverBareModulesPlugin(config, options.onWarning), esbuildPluginPnp.pnpPlugin()];

   if (config.serverPlatform !== "node") {
-    plugins.unshift(nodeModulesPolyfill.NodeModulesPolyfillPlugin());
+    plugins.unshift(NodeGlobalsPolyfillPlugin({buffer: true, process: true}));
+    plugins.unshift(NodeModulesPolyfillPlugin());
   }

   return esbuild__namespace.build({

But now we're getting another error importing LOGIN_PROVIDER from @toruslabs/openlogin package.

> nx run shared:build

Bundling shared...
Error during bundle: Error: Could not resolve './build/Release/ecdh' from ./build/Release/ecdh?commonjs-external
Bundle failed: shared

Any help is really appreciated!

[chaitanyapotti]

The current solution for this is to use dynamic imports in useEffect() and polyfill the node deps

on to why we do this:

We need to use a lot of crypto packages which are secure and audited. A lot of these packages are built for node.js We don't have good browser friendly alternatives which are pure js/ audited.

[jdnichollsc]

The current solution for this is to use dynamic imports in useEffect() and polyfill the node deps

Yeah, that's the problem with RemixJS. This Framework doesn't support dynamic imports like NextJS or another React Frameworks :/

[chaitanyapotti]

With the latest version, you won't need to polyfill anymore.