BROWSER Environment Variable Not Picked Up

[danieldogeanu]

Hey guys, I have a bit of a problem with environment variables being picked up from .env files.

Bug Description

When I add a .env.local file in the root of my project, with a fresh install of the Create React App, the BROWSER variable is not picked up by the React App and the specified browser is not opened. I usually use Firefox Developer Edition for development, and this is a bit frustrating. Here's the contents of my .env.local file:

BROWSER="C://Program Files//Firefox Developer Edition//firefox.exe"

Environment

Info:

  current version of create-react-app: 3.4.1
  running from C:\Users\danie\AppData\Roaming\npm-cache\_npx\14632\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Node: 12.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
    Internet Explorer: 11.0.18362.1
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-scripts: 3.4.3 => 3.4.3
  npmGlobalPackages:
    create-react-app: Not Found

Package.json:

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Steps to Reproduce

1. Install a fresh copy of Create React App via npx create-react-app your-app-name;

2. Add a .env.local file to the root of the project and add the following contents:

BROWSER="C://Program Files//Firefox Developer Edition//firefox.exe"

Note: You can test on a different browser path.

3. Run npm start in the command line.

Expected Behavior

Should launch the app in Firefox Developer Edition browser.

Actual Behavior

The app opens in the default browser.

---

I have the suspicion that the environment variables are not loaded properly. If I add REACT_APP_ before the variable name, it shows in the process.env, but the name of the variable should be BROWSER and not REACT_APP_BROWSER, as per documentation.

Can you guys help me? Thanks!

[petetnt]

Hi @danieldogeanu, you are correct that the process.env will only contain the REACT_APP prefixed ones and the advanced configuration ones like BROWSER are parsed and used before that.

Does BROWSER="C://Program Files//Firefox Developer Edition//firefox.exe" npm start work for you? Or setting the variable to .env instead of the .local file?

The documentation says that the advanced-configuration variables could be stored in the .env file, but not sure if they are actually stripped off when setting the env in https://github.com/facebook/create-react-app/blob/5bd6e73047ef0ccd2f31616255c79a939d6402c4/packages/react-scripts/config/env.js

[baguilarq]

Hi @danieldogeanu, you are correct that the process.env will only contain the REACT_APP prefixed ones and the advanced configuration ones like BROWSER are parsed and used before that.

Does BROWSER="C://Program Files//Firefox Developer Edition//firefox.exe" npm start work for you? Or setting the variable to .env instead of the .local file?

The documentation says that the advanced-configuration variables could be stored in the .env file, but not sure if they are actually stripped off when setting the env in https://github.com/facebook/create-react-app/blob/5bd6e73047ef0ccd2f31616255c79a939d6402c4/packages/react-scripts/config/env.js

I tried setting the BROWSER variable in .env and defining it before npm start and always opens my default browser.

react-scripts: 3.4.3

[danieldogeanu]

Hi @danieldogeanu, you are correct that the process.env will only contain the REACT_APP prefixed ones and the advanced configuration ones like BROWSER are parsed and used before that.

Does BROWSER="C://Program Files//Firefox Developer Edition//firefox.exe" npm start work for you? Or setting the variable to .env instead of the .local file?

The documentation says that the advanced-configuration variables could be stored in the .env file, but not sure if they are actually stripped off when setting the env in https://github.com/facebook/create-react-app/blob/5bd6e73047ef0ccd2f31616255c79a939d6402c4/packages/react-scripts/config/env.js

Hi @petetnt, No, it doesn't work that way either. Storing variables in .env was one of the first things I tried.
PS: I'm on Windows, setting environment variables in the command itself doesn't work.

[danieldogeanu]

I also discovered that open-cli package doesn't work anymore as well. Maybe it has something to do with it. Older projects that weren't updated work just fine.

[petetnt]

PS: I'm on Windows, setting environment variables in the command itself doesn't work.

Ah my bad, you could try using the cross-env package for example, try changing the package.json start script to:

cross-env BROWSER="C://Program Files//Firefox Developer Edition//firefox.exe" react-scripts start

and running npm start.

If you are using the basic cmd prompt, cmd /C "set EDITOR=\"C://Program Files//Firefox Developer Edition//firefox.exe\" && npm start or similar might also work (check the escapes) :)

I also discovered that open-cli package doesn't work anymore as well. Maybe it has something to do with it. Older projects that weren't updated work just fine.

That's interesting, possible Windows regression?

[jiimka]

I've just updated from v3.4.1 to v3.4.1 and my simple script from package.json has also stopped working correctly:
cross-env BROWSER='firefox' react-scripts start
It now opens in the default browser.
I'm not using Windows, BTW - I'm on Linux Mint 19.3.

[ortigozamatias]

Hi! Having the same problem after trying both approaches, .env and BROWSER='Google Chrome' react-scripts start.
However, when setting BROWSER=none react-scripts start it does not open any browser, which is correct.

I'm on macOS Catalina (10.15.6).

BTW, the react-scripts version is 3.4.3.

[danieldogeanu]

Ok, so apparently it was indeed an issue with open and it seems they fixed it. I deleted the node_modules folder and package-lock.json and reinstalled the dependencies. Now it works fine. However open-cli still doesn't work, as it uses an older version of open. Which goes to prove my suspicion.

[JaumeFigueras]

Hello! I'm having exactly the same issue. The npm start opens always the default browser. If I set in the .env file BROWSER=none, no browser open, If I set google-chrome-stable or chromium-browser I always get the default browser that in my case is firefox. If I change the default browser to chrome and try BROWSER=firefox, the chrome is open, no matter the config, only opens the default browser. This behaviour happens with command line, with .env and setting the browser in the package.json start section.
I'm on ubuntu 20.04, node 16.13.1, npm 8.1.2
react 17.0.2, react-dom 17.0.2 and react-scripts 5.0.0
The deletion and reinstall commented by @danieldogeanu didn't worked.

[TheJltres]

@JaumeFigueras I had the same problem, but with the inverse browsers 😆

This solved my issue: (For your case invert the browsers)

$ xdg-settings get default-web-browser
google-chrome.desktop

$ xdg-settings set default-web-browser firefox.desktop

I run Kubuntu, and KDE config was saying my default browser was Firefox, so may be a Ubuntu bug? idk
Solution from: https://askubuntu.com/a/610221

Now it opens with my real default browser, BROWSER env is still not working!

[schrer]

@TheJltres thanks for the hint, xdg-settings fixed it for me as well.
Settings were the same as yours, KDE settings app reports firefox as default browser, BROWSER is set to firefox everywhere, but xdg-settings reports chrome as default. react-scripts start always used chrome. After changing the xdg-settings default browser to firefox it opens firefox, as intended, but it still ignores the BROWSER variable, same as for you.

My platform:
Fedora 35, KDE Plasma 5.23.4, KDE Frameworks 5.89.0

So doesn't seem to be isolated to Ubuntu. Weird behavior all over the place.