The `BROWSER` environment variable isn't respected by `react-scripts` if it contains trailing spaces

Created by: RomainTHD

Describe the bug

The environment variable BROWSER isn't respected anymore with react-scripts ≥ 5, while it is respected with the previous version 4. If set to none, the process shouldn't try to open a browser, which was the correct behavior until the current version of react-scripts.

UPDATE: the variable is respected, but not if it contains trailing spaces, which Windows sometimes adds. See comment below.

Did you try recovering your dependencies?

This issue isn't related to a corrupted module tree. All packages are also up-to-date.

Which terms did you search for in User Guide?

I didn't search through the user guide, since this looks like a regression bug.

Environment

Output of npx create-react-app --info:

Click to expand

  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

This bug report is mainly aimed towards Windows, since it uses the CMD variable declaration syntax, which isn't supported by Linux. One could say that this bug would only arise from bad practice with non-portable environment variable declaration, but it still needs to be reported.

Steps to reproduce

Click to expand the (small) code sections, or see later the reproducible demo.

Create the most basic React app possible, here using the latest version of 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>
);

In the package.json, set the BROWSER variable to none while running the start script:

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"
		]
	}
}

The default web browser will then open itself, while supposed to run headless -> bug
By reverting react-scripts to ^4.0.3, the default web browser doesn't open anymore -> additional proof

Expected behavior

The expected behavior is the one from the version 4.0.3 where the browser doesn't open itself if the flag is set.

Actual behavior

The browser is opened like if the flag wasn't set, while the previous version proves that the environment variable is correctly set.

See the different behavior here for version 4.0.3 and here for the latest version

Reproducible demo

Available on , pretty straightforward.