WDS 3.x -> 4.6.0 : Error: spawn chrome ENOENT

[cl10k]

Bug report

I'm running WDS 4.6.0 from a docker container inside WSL2. I configured the devServer to automatically open Chrome with certain arguments:

...
open: {  
  app: {
    name: "chrome",
    arguments: ["--incognito", "--remote-debugging-port=9222"],
  },
},
...

Actual Behavior

WDS throws the following error:

<i> [webpack-dev-server] [HPM] Proxy created: /appServer/API -> http://127.0.0.1
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/var/www/html/lq-syskonf' directory
node:events:368
      throw er; // Unhandled 'error' event
      ^

Error: spawn chrome ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn chrome',
  path: 'chrome',
  spawnargs: [
    '--incognito',
    '--remote-debugging-port=9222',
    'http://0.0.0.0:8080/'
  ]
}

When I remove the whole app argument for Chrome, WDS runs fine, even autostarts the os default browser and also correctly updates on code changes.

I have to admit, I'm new to WSL2 and Docker and a bit confused by it. There of course is no window manager or browser in the container. Everything gets handed over to chrome on my windows host. Nonetheless I tried to change the browser application name to google-chrome. Nothing changed. But I suspect this aspect not to be the problem, since everything works fine with an older version of WDS (see below).

Expected Behavior

Until very recently I was running WDS 3.11.2 in exactly the same WSL2/Docker environment and webpack-config, but with this old syntax:

...
open: {
  app: ["chrome", "--incognito", "--remote-debugging-port=9222"],
},
...

Works fine! No problem at all. It would be nice if the newer versions behaved similarly cooperative.

How Do We Reproduce?

webpack-cli info

System:
  OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
  CPU: (12) x64 Intel(R) Xeon(R) E-2176M CPU @ 2.70GHz
  Memory: 16.70 GB / 24.91 GB
Binaries:
  Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
  npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Packages:
  babel-loader: ^8.2.2 => 8.2.2
  copy-webpack-plugin: ^9.0.1 => 9.0.1
  css-loader: ^6.2.0 => 6.2.0
  git-revision-webpack-plugin: ^5.0.0 => 5.0.0
  html-webpack-plugin: ^5.5.0 => 5.5.0
  imports-loader: ^1.2.0 => 1.2.0
  style-loader: ^1.2.1 => 1.3.0
  terser-webpack-plugin: ^5.1.3 => 5.1.4
  url-loader: ^4.1.1 => 4.1.1
  webpack: ^5.65.0 => 5.65.0
  webpack-bundle-analyzer: ^4.5.0 => 4.5.0
  webpack-cli: ^4.9.1 => 4.9.1
  webpack-dev-server: ^4.6.0 => 4.6.0
  webpack-merge: ^5.8.0 => 5.8.0
  webpack-notifier: ^1.14.1 => 1.14.1
  webpackbar: ^5.0.2 => 5.0.2

WDS part of my webpack-config:

...
devServer: {
  devMiddleware: {
    stats: "errors-only",
  },

  open: {
    app: {
      name: "chrome",
      arguments: ["--incognito", "--remote-debugging-port=9222"],
    },
  },

  proxy: {
    "/appServer/API": {
      target: "http://127.0.0.1",
      logLevel: "debug",
      secure: false,
    },
  },
},
...

---

My WSL2/docker environment and my webpack-config (except the new syntax for open) have not changed when switching versions from 3.11.2 to 4.6.0!

webpack-cli info BEFORE UPDATING TO 4.6.0

System:
  OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
  CPU: (12) x64 Intel(R) Xeon(R) E-2176M CPU @ 2.70GHz
  Memory: 16.70 GB / 24.91 GB
Binaries:
  Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
  npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Packages:
  copy-webpack-plugin: ^9.0.1 => 9.0.1
  git-revision-webpack-plugin: ^5.0.0 => 5.0.0
  html-webpack-plugin: ^4.4.1 => 4.5.2
  terser-webpack-plugin: ^5.1.3 => 5.1.4
  webpack: ^5.46.0 => 5.50.0
  webpack-bundle-analyzer: ^4.4.2 => 4.4.2
  webpack-cli: ^4.7.2 => 4.7.2
  webpack-dev-server: ^3.11.2 => 3.11.2
  webpack-merge: ^5.8.0 => 5.8.0
  webpack-notifier: ^1.13.0 => 1.13.0
  webpackbar: ^5.0.0-3 => 5.0.0-3

Please let me know if you need any additional information.

:)

[alexander-akait]

Please use:

open: {
  app: {
    // Another name
    name: "google-chrome",
    arguments: ["--incognito", "--remote-debugging-port=9222"],
  },
},

It is small breaking change on open package side

feel free to feedback

[cl10k]

I already tried that. Exactly the same error with your snippet.

From my original post (under actual behavior):

(I should've placed that statement somewhere more visible)

[alexander-akait]

Try to open your terminal and run chrome/google-chrome and other possible commands, you need specify application name here, which open a browser, ENOENT means child process in Node.js can't find application with specified name, we can't fix it here, sorry

[jim-basso]

commands like "chrome" or similar don't work in the terminal - with WDS 3.x as well as in 4.6.0.

we're in a vsCode terminal inside a docker container - nothing changed here but the versions of the webpack packages.

for clarification:
app: ["chrome", "--incognito", "--remote-debugging-port=9222"], with WDS 3.x is working in our environment.

[alexander-akait]

We really do not change nothing, just refactor options and update open package (we use open package to open browser https://github.com/sindresorhus/open/issues), I think better to report them about it, there are a lot of problems with WSL, we really can't fix it here, you can look at our logic https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L1834, we just use our dev server URL and pass your option to open package

[alexander-akait]

Maybe related sindresorhus/open#270

[bigbigDreamer]

Maybe related sindresorhus/open#270

Yeah.

In particular, you can install xdg-open in your wsl in advance.

$ sudo apt-get update 

$ sudo apt-get install xdg-open

Then, xdg-open can automatically open the default browser on your host machine, provided that you have sufficient permissions.

you can try edit the source code in open from node_modules:

if (app) {
	command = app;
} else {
	// When bundled by Webpack, there's no actual package file path and no local `xdg-open`.
	const isBundled = !__dirname || __dirname === '/';

	// Check if local `xdg-open` exists and is executable.
	let exeLocalXdgOpen = false;
	try {
			await fs.access(localXdgOpenPath, fsConstants.X_OK);
			exeLocalXdgOpen = true;
	} catch {}

		// const useSystemXdgOpen = process.versions.electron ||
		// 	platform === 'android' || isBundled || !exeLocalXdgOpen;
		// command = useSystemXdgOpen ? 'xdg-open' : localXdgOpenPath;
		command =  'xdg-open';
}

Finally，u can use as follow:

const open = require('open');

open(url, { wait: true })

Don't add app param!

More info : sindresorhus/open#270

At least this solved my problem, good luck！

I agree with @alexander-akait ‘s point of view that open source libraries should consider more public needs. Of course, as developers, we can re-explore, modify or propose pr improvements based on open source libraries.