[Bug] config中设置define后，命令行中设置的环境变量在app.tsx中无法找到

[zhangheng0317]

What happens?

umi4版本
在config.ts中开启define并设置了一个环境变量。

然后在启动命令行中设置变量REACT_APP_ENV

cross-env REACT_APP_ENV=dev UMI_ENV=dev max dev

启动后在config.ts中可以获取到REACT_APP_ENV
但是在app.tsx中找不到REACT_APP_ENV，这个问题在umi3+是好使的

我尝试关闭define后，app.tsx中可以正确读取到REACT_APP_ENV

Context

• Umi Version:4.0.2
• Node Version:16+
• Platform:Windows Edge

[fz6m]

UMI_APP_ 开头的环境变量会被自动加载，如需其他变量请在 define 配置项内配置。

[zhangheng0317]

UMI_APP_ 开头的环境变量会被自动加载，如需其他变量请在 define 配置项内配置。

我知道啊，仔细看我说的内容啊

[xierenyuan]

UMI_APP_ 开头的环境变量会被自动加载，如需其他变量请在 define 配置项内配置。

我知道啊，仔细看我说的内容啊

提供一个复现的demo 我们看看

[zhangheng0317]

https://codesandbox.io/s/unruffled-surf-kg9f41
这是一个初始化项目，我几乎什么都没改
只是在config.ts中添加了define
在app.tsx第13行加了一个console.log(REACT_APP_ENV);
使用yarn start:dev运行。

[fz6m]

在 umi4 中，define 中应该明确的指定你想使用的变量：

// .umirc.ts
define: {
  REACT_APP_ENV: process.env.REACT_APP_ENV
}

// app.tsx
console.log(REACT_APP_ENV)

如果不在 define 中指定，意味着仅在 nodejs 环境里有效（ 如 .umirc.ts ），但在 browser 内无效（如 app.ts ）

[zhangheng0317]

在 umi4 中，define 中应该明确的指定你想使用的变量：

// .umirc.ts
define: {
  REACT_APP_ENV: process.env.REACT_APP_ENV
}

// app.tsx
console.log(REACT_APP_ENV)

如果不在 define 中指定，意味着仅在 nodejs 环境里有效（ 如 .umirc.ts ），但在 browser 内无效（如 app.ts ）

然而在umi3中，REACT_APP_ENV在所有环境都生效了，umi4反到不行了？

[sorrycc]

试了下，

1、umi 3 和 umi 4 这个行为是一致的
2、UMI_APP_XXX 生效，REACT_APP_XXX 不生效
3、和是否设置 define 无关

[tuonioooo]

楼主 应该是按照 ant Design Pro 官网环境变量的方式 配置 出现的问题 确实 是 umi3 中，REACT_APP_ENV在所有环境都生效了，umi4不行，只能换写法了

[tuonioooo]

@zhangheng0317 解决方式

const { REACT_APP_ENV } = process.env;
export default defineConfig({
  define: { //公共环境变量入口
    'process.env.REACT_APP_ENV' : REACT_APP_ENV,
    REACT_APP_ENV: REACT_APP_ENV || 'local', //如果package.json 脚本中没有指定REACT_APP_ENV变量 默认本地环境变量
    TITLE: defaultSettings.title, // 系统标题
    FOO: 'bar',
  },

  //...  
} 

最重要的一点是，start 时必须指定 REACT_APP_ENV=local ，umi3 的话 可以不指定 ，在 define 中 配置默认值即可，但是 umi4 会覆盖（是基于 pro 的覆盖），覆盖的值也是有问题，覆盖了一个false ，正常应该是覆盖一个 undefined

"start": "cross-env REACT_APP_ENV=local UMI_ENV=local max dev --port=8010",

这样的话，代码修改量最少