process is not defined when using a package that depends on it (in client) #4906

chang-ryan · 2022-12-12T20:24:15Z

chang-ryan
Dec 12, 2022

Read me!

I fully understand that from several other issues mentioned here:
#1186, remix-run/history#821, #2927

We should not be using process.env in the client. However, this issue is not concerning that. It's concerning the fact that other packages might be using it.

Wanted to start a discussion on this.

What version of Remix are you using?

1.8.2

Steps to Reproduce

install remix indie stack
install @paperxyz/react-client-sdk
use package import { PaperSDKProvider, LoginWithPaper } from "@paperxyz/react-client-sdk";
npm run dev
bug occurs

Expected Behavior

I expect us to be able to pull in this package @paperxyz/react-client-sdk

Actual Behavior

Uncaught ReferenceError: process is not defined
    at node_modules/@paperxyz/js-client-sdk/dist/index.js (index.js:5:1534)

This is because the client dependency @paperxyz/react-client-sdk has references to process.env in its source code. I can monkey patch this by directly going into the outputted index.js file from @paperxyz and setting the following

// inside `node_modules/@paperxyz/js-client-sdk/dist/index.js`

var process = {
  env: {}
};

Is there any way I can globally inject this fake variable into remix's client environment? I anticipate that other packages that utilize a reference to process.env in its source code will break with remix.

Answered by sergiodxa

Dec 20, 2022

You can use an inline script to define process.env, see https://sergiodxa.com/articles/use-process-env-client-side-with-remix

View full answer

buildtheui · 2022-12-20T00:00:33Z

buildtheui
Dec 20, 2022

This is also happening to me in another context. We have a monorepo and we're importing some local packages that are used on the client side, these libs like a UI component library or shared configs are using the process.env behind-the-scenes reading variables injected for the whole monorepo, this is working for other apps we have created using other frameworks like Nextjs or simple CRA apps and changing the way Envs are used in the shared libs would break other existing apps, so this is similar to what @chang-ryan mentions, is there any way to solve this?

2 replies

chang-ryan Dec 21, 2022
Author

i'm using this as a workaround

`window.process = ${JSON.stringify({})}`

// root.tsx

export default function App() {
  return (
    <html lang="en" className="h-full">
      <head>
        <Meta />
        <Links />
      </head>
      <body className="h-full">
        <div className="absolute w-full top-0 z-20 bg-gradient-to-b from-slate-800 flex justify-between items-center py-4 px-6">
          <img src={nectarverseLogo} alt="Nectarverse logo" className="h-12" />
          <nav className="flex items-center">
            <Link to="" className="font-bold uppercase text-white ml-4">Nectar</Link>
            <Link to="" className="font-bold uppercase text-white ml-4">Roadmap</Link>
            <Link to="" className="font-bold uppercase text-white ml-4">Explore</Link>
            <Link to="" className="flex items-center justify-center rounded-md border border-transparent bg-nectar-green/30 px-20 py-1 text-base font-bold uppercase text-white shadow-sm sm:px-8-md ml-12">Home</Link>
          </nav>
        </div>

        <Outlet />
        <ScrollRestoration />
        <script
          dangerouslySetInnerHTML={{
            __html: `window.process = ${JSON.stringify({})}`,
          }}
        />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

buildtheui Jan 19, 2023

Thanks @chang-ryan this workaround works for serializable values, I wish we wouldn't have to do that, but it's what we have for now

sergiodxa · 2022-12-20T04:46:29Z

sergiodxa
Dec 20, 2022
Maintainer

You can use an inline script to define process.env, see https://sergiodxa.com/articles/use-process-env-client-side-with-remix

5 replies

chang-ryan Dec 21, 2022
Author

this is a nice way to inject env variables from .env files into the client side application, but if there are dependencies on the front end (from another package that i've imported), then this issue will still cause an error

chang-ryan Dec 21, 2022
Author

for example, this dependency was breaking for me: https://github.com/paperxyz/js-client-sdk/blob/main/src/constants/settings.ts

but you can see from the code that they've since patched it (at my request) with ?. however like @buildtheui said, there could be other dependencies that use process.env behind the scenes. so it might be fruitful to have some kind of workaround in remix for this. otherwise we need to just wait on the dependency maintainers to patch any usages of process.env

jdnichollsc Jan 17, 2023

we're not able to use objects from process.env like Buffer with other dependencies like web3 packages, etc using inline scripts

buildtheui Jan 19, 2023

@jdnichollsc correct for non-serializable values we have to resort to other things like patching the compiler as @jdnichollsc did, what I ended up doing in this particular case was injecting the Buffer class in a useEffect on the root class as follows:

// root.tsx
import { Buffer } from "buffer";
...
useEffect(() => {
        // This allows WalletConnect to work
        if (!window.Buffer) {
            window.Buffer = Buffer;
        }
 });
...

jdnichollsc Jun 23, 2023

@buildtheui sorry for the delay, I tried that alternative but I was getting this error:

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-PZDJHGND.js:18:50)
    at slicedToArray.js:7:1

jdnichollsc · 2023-01-17T18:22:43Z

jdnichollsc
Jan 17, 2023

I was able to solve issues with libs (web3auth, etc) using process.env and Buffer from Browser with the below patch:

patches/@remix-run+dev+1.10.1.patch

diff --git a/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js b/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js
index 1fa83a5..5892640 100644
--- a/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js
+++ b/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js
@@ -16,11 +16,11 @@ var path = require('path');
 var module$1 = require('module');
 var esbuild = require('esbuild');
 var nodeModulesPolyfill = require('@esbuild-plugins/node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var assets = require('./assets.js');
 var dependencies = require('./dependencies.js');
 var loaders = require('./loaders.js');
 var browserRouteModulesPlugin = require('./plugins/browserRouteModulesPlugin.js');
-var cssFilePlugin = require('./plugins/cssFilePlugin.js');
 var deprecatedRemixPackagePlugin = require('./plugins/deprecatedRemixPackagePlugin.js');
 var emptyModulesPlugin = require('./plugins/emptyModulesPlugin.js');
 var mdx = require('./plugins/mdx.js');
@@ -77,10 +77,18 @@ const createEsbuildConfig = (config, options) => {
     // that we don't want to run in the browser (i.e. action & loader).
     entryPoints[id] = config.routes[id].file + "?browser";
   }
-  let plugins = [deprecatedRemixPackagePlugin.deprecatedRemixPackagePlugin(options.onWarning), cssFilePlugin.cssFilePlugin({
-    mode: options.mode,
-    rootDirectory: config.rootDirectory
-  }), urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), browserRouteModulesPlugin.browserRouteModulesPlugin(config, /\?browser$/), emptyModulesPlugin.emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/), nodeModulesPolyfill.NodeModulesPolyfillPlugin()];
+  let plugins = [
+    nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({
+      buffer: true,
+      process: true
+    }),
+    nodeModulesPolyfill.NodeModulesPolyfillPlugin(),
+    deprecatedRemixPackagePlugin.deprecatedRemixPackagePlugin(options.onWarning),
+    urlImportsPlugin.urlImportsPlugin(),
+    mdx.mdxPlugin(config),
+    browserRouteModulesPlugin.browserRouteModulesPlugin(config, /\?browser$/),
+    emptyModulesPlugin.emptyModulesPlugin(config, /\.server(\.[jt]sx?)?$/)
+  ];
   return {
     entryPoints,
     outdir: config.assetsBuildDirectory,
diff --git a/node_modules/@remix-run/dev/dist/compiler/compilerServer.js b/node_modules/@remix-run/dev/dist/compiler/compilerServer.js
index 21cbad7..d70b0e3 100644
--- a/node_modules/@remix-run/dev/dist/compiler/compilerServer.js
+++ b/node_modules/@remix-run/dev/dist/compiler/compilerServer.js
@@ -16,8 +16,8 @@ var path = require('path');
 var esbuild = require('esbuild');
 var fse = require('fs-extra');
 var nodeModulesPolyfill = require('@esbuild-plugins/node-modules-polyfill');
+var nodeGlobalsPolyfill = require('@esbuild-plugins/node-globals-polyfill');
 var loaders = require('./loaders.js');
-var cssFilePlugin = require('./plugins/cssFilePlugin.js');
 var deprecatedRemixPackagePlugin = require('./plugins/deprecatedRemixPackagePlugin.js');
 var emptyModulesPlugin = require('./plugins/emptyModulesPlugin.js');
 var mdx = require('./plugins/mdx.js');
@@ -63,11 +63,14 @@ const createEsbuildConfig = (config, assetsManifestChannel, options) => {
   }
   let isCloudflareRuntime = ["cloudflare-pages", "cloudflare-workers"].includes(config.serverBuildTarget ?? "");
   let isDenoRuntime = config.serverBuildTarget === "deno";
-  let plugins = [deprecatedRemixPackagePlugin.deprecatedRemixPackagePlugin(options.onWarning), cssFilePlugin.cssFilePlugin({
-    mode: options.mode,
-    rootDirectory: config.rootDirectory
-  }), urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), emptyModulesPlugin.emptyModulesPlugin(config, /\.client(\.[jt]sx?)?$/), serverRouteModulesPlugin.serverRouteModulesPlugin(config), serverEntryModulePlugin.serverEntryModulePlugin(config), serverAssetsManifestPlugin.serverAssetsManifestPlugin(assetsManifestChannel.read()), serverBareModulesPlugin.serverBareModulesPlugin(config, options.onWarning)];
+  let plugins = [deprecatedRemixPackagePlugin.deprecatedRemixPackagePlugin(options.onWarning), urlImportsPlugin.urlImportsPlugin(), mdx.mdxPlugin(config), emptyModulesPlugin.emptyModulesPlugin(config, /\.client(\.[jt]sx?)?$/), serverRouteModulesPlugin.serverRouteModulesPlugin(config), serverEntryModulePlugin.serverEntryModulePlugin(config), serverAssetsManifestPlugin.serverAssetsManifestPlugin(assetsManifestChannel.read()), serverBareModulesPlugin.serverBareModulesPlugin(config, options.onWarning)];
   if (config.serverPlatform !== "node") {
+    plugins.unshift(
+      nodeGlobalsPolyfill.NodeGlobalsPolyfillPlugin({
+        buffer: true,
+        process: true
+      })
+    );
     plugins.unshift(nodeModulesPolyfill.NodeModulesPolyfillPlugin());
   }
   return {

And from package.json:

  "scripts": {
    "postinstall": "run-s postinstall:*",
    "postinstall:patch": "patch-package",
    "postinstall:remix": "remix setup node",
  },

Let me know if there's any solution to avoid disabling cssFilePlugin!

1 reply

jdnichollsc Jun 23, 2023

cssFilePlugin error was fixed in the latest version of Remix! <3

anakinsolo · 2023-03-07T22:53:21Z

anakinsolo
Mar 7, 2023

There is this package https://www.npmjs.com/package/@storyblok/react that you must init inside the root.tsx and outside of anything

//app/root.tsx
...
import { apiPlugin, storyblokInit } from '@storyblok/react';
import { ComponentList } from './components/ComponentList';

storyblokInit({
  accessToken: 'token',
  use: [apiPlugin],
  components: ComponentList,
});
...
//The rest of the root file
const MainStyles = ( {children} :{children: ReactNode}) => {
  return (
    <html lang="en" className="h-full">
      <head>
        <Meta />
        <Links />
      </head>
      <body className="h-full">
        {children}
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
};

export default function App() {
  return (
    <MainStyles>
      <Navigation />
      <Outlet />
      <Footer />
    </MainStyles>
  );
}

So for me, none of the solutions listed in here works https://remix.run/docs/en/1.14.0/guides/envvars#browser-environment-variables

0 replies

johannbuscail · 2023-06-02T18:25:20Z

johannbuscail
Jun 2, 2023

I'm facing the same issue. I need Shopify Admin API to run on a hydrogen app (using remix). But this admin API requires access to the process variable. This throws the error Reference Error: Process is not defined. Can anyone help ?

0 replies

jdnichollsc · 2023-06-23T01:21:21Z

jdnichollsc
Jun 23, 2023

Hey folks, check my example to fix this issue https://gist.github.com/jdnichollsc/b73eca1f34bdd1e3a95283774fda2212

0 replies

gustavopch · 2023-07-10T15:23:18Z

gustavopch
Jul 10, 2023

In my case, I was importing utils from outside the app directory. It turns out undesired code ended up in the client bundle because .server.ts extension is only considered for files inside it. Fixed by patching the condition below to use config.rootDirectory instead of config.appDirectory.

remix/packages/remix-dev/compiler/plugins/emptyModules.ts

Lines 19 to 27 in c9648c7

    
           if ( 
        
             includeNodeModules || 
        
             // Limit this behavior to modules found in only the `app` directory. 
        
             // This allows node_modules to use the `.server.js` and `.client.js` 
        
             // naming conventions with different semantics. 
        
             path 
        
               .resolve(args.resolveDir, args.path) 
        
               .startsWith(config.appDirectory) 
        
           ) {

0 replies

zhanybekovv · 2023-08-23T16:02:20Z

zhanybekovv
Aug 23, 2023

Any updates here? @chang-ryan @sergiodxa @jdnichollsc @anakinsolo @buildtheui

2 replies

sergiodxa Aug 23, 2023
Maintainer

Updates on what? Remix is most likely not going to polyfill process on the client-side build. Packages that are intended to be used client-side should stop depending on things only available on Node.js.

If the package only uses process.env it's possible to render an inline script to set window.process = { env: {} } as I explained here https://sergiodxa.com/articles/use-process-env-client-side-with-remix, this way you can set what env variables the package needs.

For other built-ins available only on Node.js, you will have to manually polyfill them, or ask the package author to don't rely on them being available.

Also, please don't mention everyone who commented on a discussion.

saugion Aug 23, 2023

I'm using a library that has a reference to pump, that is what is causing the process issue. I've solved it with this vite configuration, hope it helps

import {UserConfigFn, splitVendorChunkPlugin} from 'vite';
import { overrideVaadinConfig } from './vite.generated';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-polyfill-node'

const customConfig: UserConfigFn = (env) => ({
  // Here you can add custom Vite parameters
  // https://vitejs.dev/config/
    optimizeDeps: {
        esbuildOptions: {
            target: "esnext",
            define: {
                global: 'globalThis'
            },
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true,
                    process: true,
                }),
                NodeModulesPolyfillPlugin()
            ]
        },
    },

    build: {
        minify: false,
        target: "esnext",
        commonjsOptions: {
            transformMixedEsModules: true
        },
        rollupOptions: {
            plugins: [
                rollupNodePolyFill()
            ]
        }
    },

    plugins: [splitVendorChunkPlugin()],

    define: {
        "process.env.NODE_ENV": JSON.stringify(env.mode)
    }
});

export default overrideVaadinConfig(customConfig);

process is not defined when using a package that depends on it (in client) #4906

Read me!

What version of Remix are you using?

Steps to Reproduce

Expected Behavior

Actual Behavior

Replies: 8 comments · 10 replies

chang-ryan Dec 21, 2022 Author

sergiodxa Dec 20, 2022 Maintainer

chang-ryan Dec 21, 2022 Author

chang-ryan Dec 21, 2022 Author

sergiodxa Aug 23, 2023 Maintainer

Replies: 8 comments 10 replies

chang-ryan Dec 21, 2022
Author

sergiodxa
Dec 20, 2022
Maintainer

chang-ryan Dec 21, 2022
Author

chang-ryan Dec 21, 2022
Author

sergiodxa Aug 23, 2023
Maintainer