Cannot launch via Windows (Powershell or Command prompt)

[jakobo]

About

Devtools cannot be launched from windows

Reproduction

1. run npx urql-devtools from a PowerShell prompt
2. run npx urql-devtools from a Command prompt

Expected result

• Devtools opens after the usual install process

Actual result

• App does not open, emits error

C:\Users\jakob>npx urql-devtools
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'start' ]
}

Additional info

environment	version
os	Windows 10
node	14.15.1 (npm 6.14.8)
urql	n/a
urql-devtools	2.0.3
@urql/devtools	n/a

The likely cause is that we're spawning with npm instead of npm.cmd on windows inside of cli.js

Edit: Workaround: Since several repo filenames have a colon in them :, you can't check out the repo on windows. However, I was able to edit cli.js directly to verify this was the issue by doing an npm i -g urql-devtools and editing the files on disk. With this change, the devtools can be launched without npx

• directly in powershell via urql-devtools
• from within the WSL2 environment via powershell.exe adb reverse tcp:7700 tcp:7700 && powershell.exe urql-devtools

---

• ✔️ I've read the code of conduct
• ✔️ I've read the contributing guidelines
• ✔️ I'm willing to submit a fix for this change

[andyrichardson]

Hey @jakobo thanks for the bug report and additional info.

Since several repo filenames have a colon in them :, you can't check out the repo on windows

Files in this repo have a colon in the name?

The likely cause is that we're spawning with npm instead of npm.cmd on windows inside of cli.js

Is this what you did in order to get it to work? Definitely make a PR for this if that is the case and we'll merge it 👍

[jakobo]

Checkout
Correct. The following files are in the repo which generate this error:

error: invalid path 'src/panel/__image_snapshots__/TimelineDuration - Alive: basic-landscape-snap.png'
fatal: unable to checkout working tree

• TimelineDuration - Alive: basic-landscape-snap.png
• TimelineDuration - Alive: basic-portrait-snap.png
• TimelineDuration - Network: error-landscape-snap.png
• TimelineDuration - Network: error-portrait-snap.png
• TimelineDuration - Network: fetching-landscape-snap.png
• TimelineDuration - Network: fetching-portrait-snap.png
• TimelineDuration - Network: success-landscape-snap.png
• TimelineDuration - Network: success-portrait-snap.png

Resolution
Yes. The new cli.js is

#!/usr/bin/env node
const { spawn } = require("child_process");
spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ["start"], { stdio: "inherit", cwd: `${__dirname}/..` });

I'll be able to get a PR in tomorrow when I get WSL fixed on my windows box which doesn't care about : in filenames. :)

[JoviDeCroock]

Hey @jakobo

This could be due to node not being in your PATH I've encountered this issue myself as well on my Win machine. The issue is better described here.

[andyrichardson]

Going to close for now as @JoviDeCroock confirmed he was able to run this fine on Windows once the path was set up.

Let us know if you still have issues after making that amendment 👍

[jakobo]

Can confirm it doesn't work, even though node, npm, and npx are all located in the windows path. There's something absolutely bizarre about the shell environment npx runs the command in.

Alternatively, instead of switching between npm and npm.cmd, it's also possible to:

• Launch spawn with shell:true which ensures it runs within process.env.ComSpec on Windows
• Uses child_process.exec which implies shell:true and takes space-separated arguments

Some reference on the long-standing annoyance. Based on that thread, the npm/npm.cmd swap, using shell:true, or using exec would be safe options since the CLI is not using any non sanitized user-generated input, just the __dirname value.

[Looooong]

I start the devtools from Powershell using yarn urql-devtools and get nearly the same error:

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

Error: spawn npm ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:467:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:467:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'start' ]
}

[jakobo]

The fix is merged, but there isn’t a release yet with the fix included. For now, you can edit the cli.js file in your global node_modules to apply one of the above fixes. Hopefully a patch release comes out soon with the change

[andyrichardson]

Just pushed v2.6.3 - this should now be resolved 👍