Build: Handle project paths containing spaces in dev script

[Mustafabharmal]

What?

Closes #80516.

Fixes the build scripts so npm run dev works correctly when the Gutenberg repository is located in a directory whose path contains spaces (for example, LocalWP's default Local Sites directory).

Why?

The development build script was using child_process.spawn() with shell: true. When script paths contained spaces, the shell split the path before execution, causing commands such as clean.mjs to fail with a MODULE_NOT_FOUND error.

Instead of manually quoting script paths, this PR adopts the same approach already used by build.mjs by switching to cross-spawn. This avoids shell parsing issues and provides a more robust, cross-platform solution.

How?

• Replace child_process.spawn with cross-spawn in tools/build-scripts/dev.mjs.

• Remove shell: true from:

  • exec()
  • execAsync()
  • the wp-build --watch process

• Keep script paths unchanged, allowing cross-spawn to handle paths containing spaces correctly.

Testing Instructions

1. Clone or move the Gutenberg repository into a directory containing spaces, for example:

   /Users/<username>/Local Sites/gutenberg
   

2. Install dependencies.

   npm install
   composer install

3. Run:

   npm run dev

4. Verify the development build starts successfully.
5. Verify the build progresses past the Cleaning packages... step without failing with a MODULE_NOT_FOUND error.

Screenshots or screencast

N/A

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mustafabharmal <mustafabharmal@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[manzoorwanijk]

I think a better solution here is to use cross-spawn which is already used by the build script

The changes needed (click to expand)

diff --git a/tools/build-scripts/dev.mjs b/tools/build-scripts/dev.mjs
index 2759f9ebb30..0685f22d6a4 100644
--- a/tools/build-scripts/dev.mjs
+++ b/tools/build-scripts/dev.mjs
@@ -3,7 +3,8 @@
 /**
  * External dependencies
  */
-import { execSync, spawn } from 'child_process';
+import { execSync } from 'child_process';
+import spawn from 'cross-spawn';
 import { fileURLToPath } from 'url';
 import { parseArgs } from 'util';
 import path from 'path';
@@ -29,7 +30,6 @@ function exec( command, args = [], options = {} ) {
 		const childOptions = {
 			cwd: ROOT_DIR,
 			stdio: silent ? 'pipe' : 'inherit',
-			shell: true,
 			...spawnOptions,
 		};
 
@@ -90,7 +90,6 @@ function execAsync( command, args = [], options = {} ) {
 	return spawn( command, args, {
 		cwd: ROOT_DIR,
 		stdio: 'inherit',
-		shell: true,
 		...options,
 	} );
 }
@@ -231,7 +230,6 @@ async function dev() {
 		const buildWatch = spawn( 'wp-build', [ '--watch' ], {
 			cwd: ROOT_DIR,
 			stdio: [ 'inherit', 'pipe', 'inherit' ],
-			shell: true,
 			env: { ...process.env, NODE_ENV: 'development' },
 		} );
 

[manzoorwanijk]

Looks good. Thanks