process is not defined on SSR (Remix)

[mzaatar]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch readable-stream@3.6.0 for the project I'm working on.

I'm using this library (as a sub-dependency of Terra Station wallet in a Remix and this library throws an exception on client-side process is not defined

Here is the diff that solved my problem (after polyfill process to client):

diff --git a/node_modules/readable-stream/lib/_stream_readable.js b/node_modules/readable-stream/lib/_stream_readable.js
index 192d451..244906c 100644
--- a/node_modules/readable-stream/lib/_stream_readable.js
+++ b/node_modules/readable-stream/lib/_stream_readable.js
@@ -45,6 +45,9 @@ var Stream = require('./internal/streams/stream');

 var Buffer = require('buffer').Buffer;

+var process = require('process');
+
 var OurUint8Array = global.Uint8Array || function () {};

 function _uint8ArrayToBuffer(chunk) {
diff --git a/node_modules/readable-stream/lib/_stream_writable.js b/node_modules/readable-stream/lib/_stream_writable.js
index a2634d7..7686a4b 100644
--- a/node_modules/readable-stream/lib/_stream_writable.js
+++ b/node_modules/readable-stream/lib/_stream_writable.js
@@ -69,6 +69,9 @@ var Stream = require('./internal/streams/stream');

 var Buffer = require('buffer').Buffer;

+var process = require('process');
+
 var OurUint8Array = global.Uint8Array || function () {};

 function _uint8ArrayToBuffer(chunk) {

This issue body was partially generated by patch-package.

[mcollina]

@ShogunPanda could you check if we will need this kind of hacks in v4 too?

[ShogunPanda]

I would love to. @mzaatar As I'm not familiar with Remix, would you please share a minimum unpatched repo example I can play it?

[ShogunPanda]

Ok, I've checked with a minimal repro. readable-stream v4 by design choice will never modify the global scope and thus process, Buffer or similar will be unavailable.

Anyway, we have solution for all major bundlers, as we use them in our CI process. In @mzaatar example we're talking about esbuild (which is used by Remix internally).

The step to solve the bug are:

1. Install remix-esbuild-override
2. Add the following within remix.config.js:

    const { withEsbuildOverride } = require('remix-esbuild-override')
    withEsbuildOverride((option, { isServer, isDev }) => {
       option.inject.push([__dirname + '/esbuild-browsers-shims.mjs'])
       return option
   })

3. Create the esbuild-browsers-shims.mjs with the same contents of this file.

I think we can close this!

@mcollina Do you think we should add information about the bundlers in the README? Enjoy!

[mcollina]

Add it inside the bundlers section.