import.meta.env and process.env not working in App.tsx

[basit-qayoom]

import.meta.env and process.env not working in App.tsx

Description

I'm encountering issues while trying to access environment variables in my App.tsx file.

1. When I try to console import.meta.env, I receive the following TypeScript error:
   Property ‘env’ does not exist on type ‘ImportMeta’.ts(2339)

2. When attempting to console process.env, the browser shows:
   process is not defined

Steps to Reproduce

1. Create an .env file in the root directory.
2. In App.tsx, add the following code:

console.log(import.meta.env);
console.log(process.env);

3. Observe the TypeScript error and the runtime error in the browser.

```{
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "@rsbuild/core": "1.0.1-beta.15",
  "@rsbuild/plugin-react": "1.0.1-beta.15"
} ```

Expected Behavior

I expect import.meta.env to log the environment variables defined in the .env file without any TypeScript errors. Similarly, process.env should log the environment variables without causing a runtime error.

Actual Behavior

	•	TypeScript throws an error when accessing import.meta.env.
	•	The browser throws an error when accessing process.env.

Additional Context
The .env file is placed in the root directory, and I have already ensured it is correctly formatted.

[chenjiahan]

You should always use import.meta.env.SOME_NAME or process.env.SOME_NAME.

see https://rsbuild.dev/guide/advanced/env-vars#identifiers-matching

[abenhamdine]

also see #3029 for more background and history

[RoyRao2333]

@chenjiahan

It's not working with the full name on my side:

// .env.local

ABC=1

// App.tsx

console.log(import.meta.env.ABC)

Then I got error:

But I can successfully do console.log(import.meta.env.MODE);:

[chenjiahan]

I am not familiar with Vercel, maybe you need to check Vercel's documentation

[RoyRao2333]

@chenjiahan

感谢大佬的解释，懒得打英文了，我换一个描述形式吧：

本人学艺不精，这是我的理解：RsBuild作为前端项目的构建工具，那么理论上构建的代码都算client代码，那么举个例子，如何在React项目中访问私有环境变量呢？如果不能访问的话，那么私有环境变量存在的意义是什么呢？感谢！

[chenjiahan]

Are you using Rsbuild to build the api/** modules?

[RoyRao2333]

@chenjiahan

src/api/** is under src, so it might be built with RsBuild?

[chenjiahan]

If you are sure that the module is built by Rsbuild, you can use source.define to replace the environment variables in it