Defining/replacing custom build variables

[maranomynet]

Hi. Is it possible to define custom build variables, and have them string-replaced during build — similar to esbuild's define option.

I'm running Remix with a monorepo where a local workspace module uses a custom process.env.* build variable, which triggers client errors in the Remix build.

[sergiodxa]

The only build variable Remix supports is process.env.NODE_ENV, any other process.env is treated as an actual env variables, so it can only be read server-side and it needs to be defined on the machine running the app.

[maranomynet]

This would be a useful feature, not just for process.env.SOME_THING but more generally, and would help remix co-exist with existing codebases and reuse parts of them.

I accept the argument that using process.env is over-used, and should be discouraged, but having no escape hatch for real world problem-solving can cause real pain.

(Something like shamefully_replaceBuildTokens prop on AppConfig would be perfect)

[kiliman]

Can you give me an example? I may be able to create a patch. As I've mentioned in other places, I prefer to patch Remix with a feature to come up with a sensible API. Once others play around with it and make sure it covers their use cases, then we can submit a PR.

[maranomynet]

A contrived/simplified example:

Lets imagine we're working in a yarn monorepo with two packages:

• /packages/widget
• /packages/remix-site

In /packages/remix-site/tsconfig.json we've got "paths" set to:

  "baseUrl": ".",
  "paths": {
    "@acme/widget/*": "../widget/src/*"
  },

The widget source code checks a custom build variable process.env.NPM_PUB to decide if its being run in local dev/test mode, or if it has been built and published to npmjs.org.
The build script for publishing the widget package to npmjs.org sets process.env.NPM_PUB to true, but leaves process.env.NODE_ENV untouched for downstream users.

When the remix-site app imports from @acme/widget the remix build follows the tsconfig "paths" and bundles the source directly from inside /packages/widget/src/*, replacing process.env.NODE_ENV with the appropriate string value, etc. but leaves the "process.env.NPM_PUB" flag untouched, which in turn causes errors in the browser.

I'd like to be able to add something like this to remix.config.js:

module.exports = {
  shamefully_replaceBuildVars: {
    'process.env.NPM_PUB': JSON.stringify(true), // or `false`, depending on the situation...
  }
  // Rest of the normal remix configuration...
};

...which could work similar to Next.js 'env' config and esbuild's define option.