Windows下使用react-scripts构建React(TypeScript)应用时环境变量被追加\r字符引发错误

遇到这种跨平台的换行符问题确实挺闹心的，我来帮你梳理下可能的原因和解决办法：

首先明确你的问题场景：
你的React(TypeScript)项目通过.env文件存储环境变量，内容类似：

REACT_APP_FIREBASE_PROJECTID=my-project
REACT_APP_FIREBASE_AUTHDOMAIN=my-project.firebaseapp.com

在Mac上执行react-scripts build构建后，编译后的JS文件里环境变量是正常的：REACT_APP_FIREBASE_PROJECTID:"my-project"；但在Windows上构建后，变量值末尾多了个\r，变成REACT_APP_FIREBASE_PROJECTID:"my-project\r"，这直接导致了代码报错。而且你已经在VSCode的settings.json里设置了"files.eol": "\n"，但问题依然存在。

可能的原因 #

虽然你设置了VSCode的换行符偏好，但可能存在以下几个疏漏：

• 你本地的.env文件实际还是CRLF换行（只是VSCode显示为LF，或者保存时没生效）
• Git的自动换行符转换把.env文件转成了CRLF
• react-scripts依赖的dotenv包在Windows环境下读取文件时，没有正确过滤掉换行符中的\r

解决办法 #

1. 确保.env文件确实是LF换行

• 在VSCode中打开.env文件，看右下角状态栏的换行符标识（比如显示CRLF或LF），点击它切换到LF，然后保存文件。
• 如果还是不确定，可以用命令行验证：在Windows的CMD中执行type .env | find /v ""，如果每行末尾出现^M（这是\r的可视化符号），说明文件确实有CR字符。这时可以用工具转换，比如安装dos2unix（通过Chocolatey：choco install dos2unix），然后执行dos2unix .env把文件转成LF换行。

2. 配置Git强制.env文件使用LF换行

Git默认在Windows上会把LF转成CRLF，可能会覆盖你的本地设置。可以在项目根目录创建.gitattributes文件，添加以下内容：

*.env text eol=lf

这样Git会强制.env文件始终以LF换行存储和检出，不会自动转换。

3. 添加构建前的.env预处理脚本（兜底方案）

如果上面的方法都没用，可以手动写一个脚本，在构建前自动去除环境变量值末尾的\r：

• 在项目根目录创建fix-env.js文件：

const fs = require('fs');
const path = require('path');

// 读取.env文件
const envFilePath = path.resolve(__dirname, '.env');
let envContent = fs.readFileSync(envFilePath, 'utf8');

// 替换掉变量值末尾的\r
envContent = envContent.replace(/=([^\r\n]*)\r?\n/g, '=$1\n');

// 写回处理后的内容
fs.writeFileSync(envFilePath, envContent, 'utf8');
console.log('已修复.env文件：移除了环境变量值末尾的\\r字符');

• 修改package.json的scripts，在build前执行这个脚本：

"scripts": {
  "prebuild": "node fix-env.js",
  "build": "react-scripts build"
}

这样每次执行npm run build时，都会先处理.env文件，确保变量值没有多余的\r。

备注：内容来源于stack exchange，提问作者zlZimon