white space in directory paths break create-vite

[SingingBush]

Describe the bug

Cannot run yarn create vite my-app --template react-ts due to space in directory path to user home (on Windows).

warning Error running install script for optional dependency: "C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy: Comma
nd failed.
Exit code: 1
Command: prebuild-install || node-gyp rebuild
Arguments:
Directory: C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy
Output:
prebuild-install WARN install No prebuilt binaries found (target=16.13.1 runtime=node arch=x64 libc= platform=win32)

C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy>if not defined npm_config_node_gyp (node \"C:\\Program Files\\nodejs\
\node_modules\\npm\\bin\\node-gyp-bin\\\\..\\..\\node_modules\\node-gyp\\bin\\node-gyp.js\" rebuild )  else (node \"\" rebuild )
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp info find Python using Python version 3.10.1 found at \"C:\\Python310\\python.exe\"
gyp http GET https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v16.13.1/SHASUMS256.txt
gyp http GET https://nodejs.org/download/release/v16.13.1/win-x86/node.lib
gyp http GET https://nodejs.org/download/release/v16.13.1/win-arm64/node.lib
gyp http GET https://nodejs.org/download/release/v16.13.1/win-x64/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.1/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v16.13.1/win-x86/node.lib
gyp http 404 https://nodejs.org/download/release/v16.13.1/win-arm64/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.1/win-x64/node.lib
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the \"Desktop development with C++\" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack     at VisualStudioFinder.fail (C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:121:
47)
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:74:16
gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visu
alstudio.js:351:14)
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:70:14
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:372:16
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\util.js:54:7
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\util.js:33:16
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:404:5)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! System Windows_NT 10.0.22000
gyp ERR! command \"C:\\\\Program Files\\\\nodejs\\\\node.exe\" \"C:\\\\Program Files\\\\nodejs\\\\node_modules\\\\npm\\\\node_modules\\\\node-gyp\\
\\bin\\\\node-gyp.js\" \"rebuild\"
gyp ERR! cwd C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy
gyp ERR! node -v v16.13.1
gyp ERR! node-gyp -v v8.3.0
gyp ERR! not ok"
info This module is OPTIONAL, you can safely ignore this error
success Installed "[email protected]" with binaries:
      - create-vite
      - cva
'C:\Users\Firstname' is not recognized as an internal or external command,
operable program or batch file.
error Command failed.
Exit code: 1
Command: C:\Users\Firstname Lastname\AppData\Local\Yarn\bin\create-vite
Arguments: my-app --template react-ts
Directory: C:\Users\Firstname Lastname\dev
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

The whitespace in C:\Users\Firstname Lastname\ causes an error

Reproduction

try to create a new vite app from a directory path that contains white space (maybe with space in user name if it's breaking on path to AppData)

System Info

Windows

Used Package Manager

yarn

Logs

warning Error running install script for optional dependency: "C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy: Comma
nd failed.
Exit code: 1
Command: prebuild-install || node-gyp rebuild
Arguments:
Directory: C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy
Output:
prebuild-install WARN install No prebuilt binaries found (target=16.13.1 runtime=node arch=x64 libc= platform=win32)

C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy>if not defined npm_config_node_gyp (node \"C:\\Program Files\\nodejs\
\node_modules\\npm\\bin\\node-gyp-bin\\\\..\\..\\node_modules\\node-gyp\\bin\\node-gyp.js\" rebuild )  else (node \"\" rebuild )
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp info find Python using Python version 3.10.1 found at \"C:\\Python310\\python.exe\"
gyp http GET https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v16.13.1/SHASUMS256.txt
gyp http GET https://nodejs.org/download/release/v16.13.1/win-x86/node.lib
gyp http GET https://nodejs.org/download/release/v16.13.1/win-arm64/node.lib
gyp http GET https://nodejs.org/download/release/v16.13.1/win-x64/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.1/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v16.13.1/win-x86/node.lib
gyp http 404 https://nodejs.org/download/release/v16.13.1/win-arm64/node.lib
gyp http 200 https://nodejs.org/download/release/v16.13.1/win-x64/node.lib
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the \"Desktop development with C++\" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack     at VisualStudioFinder.fail (C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:121:
47)
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:74:16
gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visu
alstudio.js:351:14)
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:70:14
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\find-visualstudio.js:372:16
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\util.js:54:7
gyp ERR! stack     at C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\lib\\util.js:33:16
gyp ERR! stack     at ChildProcess.exithandler (node:child_process:404:5)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
gyp ERR! System Windows_NT 10.0.22000
gyp ERR! command \"C:\\\\Program Files\\\\nodejs\\\\node.exe\" \"C:\\\\Program Files\\\\nodejs\\\\node_modules\\\\npm\\\\node_modules\\\\node-gyp\\
\\bin\\\\node-gyp.js\" \"rebuild\"
gyp ERR! cwd C:\\Users\\Firstname Lastname\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\snappy
gyp ERR! node -v v16.13.1
gyp ERR! node-gyp -v v8.3.0
gyp ERR! not ok"
info This module is OPTIONAL, you can safely ignore this error
success Installed "[email protected]" with binaries:
      - create-vite
      - cva
'C:\Users\Firstname' is not recognized as an internal or external command,
operable program or batch file.
error Command failed.
Exit code: 1
Command: C:\Users\Firstname Lastname\AppData\Local\Yarn\bin\create-vite
Arguments: my-app --template react-ts
Directory: C:\Users\Firstname Lastname\dev
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[cqmking]

Just get the same issue, I don't want to reinstall my nodejs to other directory, is any way to solve this issue？

`F:\study\fronside\cesium>yarn create vite vue-cesium-01 --template vue
yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vite
- cva
[#######] 7/7'D:\Develop' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
error Command failed.
Exit code: 1
Command: D:\Develop Tool\nodejs\node-v16.13.2-win-x64\node_global\bin\create-vite
Arguments: vue-cesium-01 --template vue
Directory: F:\study\fronside\cesium
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.`

[bluwy]

This is an issue with yarn: yarnpkg/yarn#6851. As a workaround, you can use npm create too. They should all work the same.