描述bug

环境变量 BROWSER 在 react-scripts ≥ 5 中不再被尊重，而在之前的版本4中是被尊重的。如果设置为 none ,进程不应该尝试打开浏览器，这是当前 react-scripts 版本的正确行为。更新：变量仍然被尊重，但如果它包含尾随空格(Windows有时会添加),则不被尊重。请参阅下面的评论。

你是否尝试恢复依赖项？

这个问题与损坏的模块树无关。所有包都是最新的。

你在用户指南中搜索了哪些术语？

我没有通过用户指南进行搜索，因为这看起来像是一个回归性错误。

环境

npx create-react-app --info 的输出：
点击展开

current version of create-react-app: 5.0.1
  running from C:\Users\Romain\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 AMD Ryzen 5 3550H with Radeon Vega Mobile Gfx
  Binaries:
    Node: 16.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: ^18.1.0 => 18.1.0
    react-dom: ^18.1.0 => 18.1.0
    react-scripts: ^5.0.1 => 5.0.1
  npmGlobalPackages:
    create-react-app: Not Found

这个bug报告主要针对Windows,因为它使用了CMD变量声明语法，这在Linux上不受支持。可以说，这个bug只会源于非可移植的环境变量声明的不良实践，但仍然需要报告。

重现步骤

点击展开代码部分的小代码段，或者稍后查看可复现的演示。

创建尽可能基本的React应用程序，这里使用React的最新版本：
public/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>Test</title>
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

src/index.jsx

import {StrictMode} from "react";
import {createRoot} from "react-dom/client";

const app = document.querySelector("#app");
const root = createRoot(app);
root.render(
	<StrictMode>
		<h1>Test</h1>
	</StrictMode>
);

在 package.json 中，在运行启动脚本时将 BROWSER 变量设置为 none :
package.json

{
	"name": "test",
	"scripts": {
		"start": "set BROWSER=none && react-scripts start"
	},
	"dependencies": {
		"react": "^18.1.0",
		"react-dom": "^18.1.0",
		"react-scripts": "^5.0.1"
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	}
}

然后默认的网络浏览器会自动打开，而应该运行无头模式 -> bug
通过将 react-scripts 还原为 ^4.0.3 ,默认的网络浏览器不再打开 -> 附加证据

预期行为

预期的行为是从 4.0.3 版本开始的，如果设置了标志，浏览器不会自动打开。

实际行为

浏览器像没有设置标志一样打开，而之前的版本证明环境变量被正确设置。
参见不同的行为 here for version 4.0.3 和 here for the latest version

4条答案

按热度按时间

zpf6vheq1#

另外，作为额外的说明，使用 cross-env (它将替换为 "start": "cross-env BROWSER=none react-scripts start" 的启动脚本)将正常工作，不会打开浏览器，如预期。
使用类似 "start": "cross-env BROWSER=none && react-scripts start" 的混合物将无法正常工作，尽管这次可能是正常的，并且由于 cross-env ,我对这个软件包不是Maven。

赞(0）回复(0）举报 22天前

smdncfj32#

你是否尝试过从.env文件中设置变量BROWSER?它的行为是否相同，或者它按预期工作？

zkure5ic3#

更新：
使用 set BROWSER=none && react-scripts start,process.env.browser 的值不是 "none" 而是 "none "。如果我改写为 set BROWSER=none&& react-scripts start,那么值就是 "none",没有空格，看起来有点奇怪。
这也解释了为什么 cross-env 可以正常工作，因为它可能在内部去除了空格。
不过我认为这仍然是一个 bug,因为尾随空格应该可以通过 react-scripts 去除，否则可能会导致像上面那样的奇怪行为。

vyswwuz24#

看起来仍然在发生，所以我用这个解决方法修复了它：
"start": "set BROWSER=none&& react-scripts start",
(注意 none 和 && 之间没有空格) 😬
感谢 @RomainTHD 的指正。

create-react-app 如果BROWSER环境变量包含尾随空格，react-scripts将不尊重它,