BROWSER Environment Variable Not Picked Up

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.

1. 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!

[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.