React "react-scripts start" fails in new Codespace

Hi all, I’m running into a reproducible issue when trying to run a newly created React app. I can reproduce this on a new repository:

  1. Create a new repo with a README.
  2. Start a Codespace on the main branch.
  3. Run npx create-react-app .
  4. Run yarn start
  5. Fails with this error:
Starting the development server...

events.js:287
      throw er; // Unhandled 'error' event
      ^

Error: spawn /home/codespace/.vscode-remote/bin/caf01baa45b9816e2e1d8a2de22b40cf89459c03/bin/code-insiders --openExternal ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
    at onErrorNT (internal/child_process.js:469:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  errno: 'ENOENT',
  code: 'ENOENT',
  syscall: 'spawn /home/codespace/.vscode-remote/bin/caf01baa45b9816e2e1d8a2de22b40cf89459c03/bin/code-insiders --openExternal',
  path: '/home/codespace/.vscode-remote/bin/caf01baa45b9816e2e1d8a2de22b40cf89459c03/bin/code-insiders --openExternal',
  spawnargs: [ 'http://localhost:3000' ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And some versions for reference:

npm --version 6.14.4

node --version v12.16.3

"react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0"

FYI on my local machine (Mac OS) this runs normally; I’m only experiencing this in a Codespace.

Anyone else experiencing this? Any ideas what’s going on? :sweat_smile:

Update: I discovered a workaround:

sudo yarn start

This starts the React development server normally in the Codespace.

It looks like the react-dev-utils package is trying to open the browser from the remote container, which is failing. In Codespaces, we really want to launch the browser on the client side, not the remote side. If you first run export BROWSER=none before running yarn start, it works since it skips trying to launch the browser on the remote side.

We’ll think through how we can make this scenario work better out of the box.

Thanks John, I will use that in my start script! :+1: Much better solution than sudo. In addition, I noticed that a .env file at the project root containing a BROWSER=none entry doesn’t seem to get picked up inside the Codespaces environment; not sure if that’s related, but might be a good note for people setting up React in there.

@edwinhollen, following up, we’ve fixed this so that it works like you’d expect without having to disable the browser. You can remove the BROWSER=none workaround now. You’ll notice that the client browser is opened automatically when you run yarn start for this scenario.

Internally, you’ll notice that VS Code is now setting the BROWSER variable so that it can intercept requests to open the browser from the remote side and then replay them on the client side.

Amazing, thank you for investigating John, and I’m a big fan of Codespaces :slight_smile: Keep up the great work!