[Bug]: process is not defined when build with cloudflare pages

[willin]

Which Remix packages are impacted?

• remix (Remix core)
• create-remix
• @remix-run/architect
• @remix-run/cloudflare-workers
• @remix-run/dev
• @remix-run/express
• @remix-run/netlify
• @remix-run/node
• @remix-run/react
• @remix-run/serve
• @remix-run/server-runtime
• @remix-run/vercel

What version of Remix are you using?

"@remix-run/cloudflare-pages": "^1.1.1"

What version of Node are you using? Minimum supported version is 14.

17.2

Steps to Reproduce

https://github.com/js-cool/remix-blog-demo/blob/main/app/utils/enviroment.ts#L17

/**
 * Get the value from an environment variable and throw a
 * MissingEnvironmentError exception if it is not found, optinally you can pass
 * a fallback value to avoid throwing if the environment variable is not defined
 * @param {string} env The environment variable name.
 * @param {string} [fallback] The fallback value in case it's not defined.
 * @throws {MissingEnvironmentError} If the environment variable is not found.
 * @returns {string} The value of the environment variable.
 */
export function env(name: string, fallback?: string): string {
  const value = process.env[name] ?? fallback;
  if (!value) throw new MissingEnvironmentError(name);
  return value;
}

Expected Behavior

work properly

Actual Behavior

cannot build

💿 Built in 167ms

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
Compiling worker to "/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js"
Finished in 55ms.
wrangler pages dev [directory] [-- command]

🧑‍💻 Develop your full-stack Pages application locally

Positionals:
  directory  The directory of static assets to serve  [string]
  command    The proxy command to run  [string]

Flags:
  -c, --config   Path to .toml configuration file  [string]
  -h, --help     Show help  [boolean]
  -v, --version  Show version number  [boolean]

Options:
  -l, --local        Run on my machine  [boolean] [default: true]
      --port         The port to listen on (serve from)  [number] [default: 8788]
      --proxy        The port to proxy (where the static assets are served)  [number]
      --script-path  The location of the single Worker script if not using functions  [string] [default: "_worker.js"]
  -b, --binding      Bind variable/secret (KEY=VALUE)  [array]
  -k, --kv           KV namespace to bind  [array]
  -o, --do           Durable Object to bind (NAME=CLASS)  [array]

ReferenceError: process is not defined
    at env (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19498:17)
    at isProduction (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19504:10)
    at build/index.js (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19616:17)
    at __init (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:9:50)
    at functions/[[path]].js (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19774:5)
    at __init (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:9:50)
    at ../../../../../var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/plinko-ZWdvUa/routes.mjs (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19785:5)
    at __init (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:9:50)
    at /var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19798:1
    at SourceTextModule.evaluate (node:internal/vm/module:224:23)
[pages:err] Unhandled Promise Rejection: ReferenceError: process is not defined
    at env (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19498:17)
    at isProduction (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19504:10)
    at build/index.js (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19616:17)
    at __init (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:9:50)
    at functions/[[path]].js (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19774:5)
    at __init (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:9:50)
    at ../../../../../var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/plinko-ZWdvUa/routes.mjs (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19785:5)
    at __init (/var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:9:50)
    at /var/folders/td/zr87rwn546n4q0y3zddn95zw0000gn/T/functionsWorker.js:19798:1
    at SourceTextModule.evaluate (node:internal/vm/module:224:23)

[sergiodxa]

This is not a bug, Cloudflare Worker doesn’t use use Node and process is a Node thing, therefore process is not available in CF.

Note that process.env.NODE_ENV it’s still available there because Remix replace it with the hard coded value on build.

[third774]

Is there an API to specify additional process.env variables that should be replaced with the hard coded values?

For example, one might want to have access to the CF_PAGES_COMMIT_SHA to include for Sentry or something?

[willin]

i'll have a try

[simontong]

Was a solution ever discovered for this? I'm also curious

[sergiodxa]

Was a solution ever discovered for this? I'm also curious

There’s no solution, it’s not a bug, you need to use env variables in the way they work in Cloudflare not using process as in Node because Cloudflare doesn’t use Node

As far as I know, in Cloudflare Workers env variables are global variables and in Cloudflare Pages you will get them in the loader and action functions with the context object.

[willin]

Was a solution ever discovered for this? I'm also curious

first, add context to functions:

// /functions/[[path]].ts
import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import * as build from '../build';

const handleRequest = createPagesFunctionHandler({
  build,
  getLoadContext: (context) => context
});

export const onRequest: PagesFunction = (context) => handleRequest(context);

then you can get it from loader:

export const loader: LoaderFunction = async ({ context }) => {
  const { env } = context;
  return json({ env });
};

[IamManchanda]

@willin - Thanks, this worked within the deployment version but how would you get that working in development locally i.e. npm run dev?

[jemjam]

I just did some digging into all this today!

It seems like in an earlier stage folks were customizing their functions/[[path]].ts and had to manually add that "getLoadContext" to grab the vars.

As of a more recent version, however, the cloudflare-pages example that remix-create built for me had the function .gitignored and generated automatically (with env values included). So as long as you set them correctly either via cloudflare config or the wrangler flag then they should be part of context automatically.

@IamManchanda if you want to use an env variable in local dev you need to ensure that wrangler knows about them via the binding flag (as per the end of this blog post):

// cli or via package scripts
$ wrangler pages dev ./public --watch ./build --binding ENV_VAR=\"my-environment-variable-value\"

// from your route loader function:
export const loader = async ({ context }) => {
  console.log('Context:', context);
  return context.ENV_VAR
}

// Context: { ASSETS: Fetcher {}, ENV_VAR: 'my-environment-variable-value' }

[dgurns]

Thanks @jemjam you saved me a lot of hassle! I'm going to do a PR to update the docs, because this is the only place I found where someone had the current answer.

[bondz]

Anyone know how you can read this in server only code?

Like when using remix-auth-socials for example and need to set secrets as environment variables. Using globalThis doesn't work.

[jgb-solutions]

@bondz did you find an answer for this? Env variables are also needed outside of the loader and action functions as well.

[bondz]

@jgb-solutions Not yet, sadly. I started a discussion at #3581 in case anyone wants to contribute.

[jgb-solutions]

@bondz okay nice!