[rsbuild] process.env を stub したい

rsbuild では、source.define と loadEnv() によって、 process.env から dotenv で管理する環境変数を client side で利用できる。

しかし、process.env で指定している値が source.define に存在しない場合、process.env がソースコードに残り以下のような reference error が起きてしまう。

Uncaught ReferenceError: process is not defined

process.env.OPTIONAL がない場合は、undefined に fallback するようにしたい。

(dotenv-webpack plugin の process.env stubbing のような挙動をイメージしている。

解決

source.define で "process.env" を空 object に設定してあげればOK。

import { defineConfig, loadEnv } from '@rsbuild/core';

const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] });

console.log('publicVars:', publicVars);

export default defineConfig({
  //...
  source: {
    define: {
      ...publicVars,
      'process.env': {},
    },
  },
  //...
});