Search code examples
visual-studio-2022react-typescriptnpx

Visual Studio 2022: Cannot create a project named "tempProjectCreation" because of npm naming restrictions

I'm trying to create a new Typescript project in Visual Studio 2022 Community Edition.

I've installed Visual Studio 2022 Community Edition (Windows), as well as Node.JS v18.12.1-x64 for Windows.

In the Visual Studio Installer (v17.4.2) I clicked the "Node.js development" workload and installed it.

I then opened Visual Studio 2022 Community and clicked "Standalone Typescript React Project" from the "Create New Project" page.

While creating the project, a command window opens and the following error occurs in a command window (cmd.exe) that was launched from Visual Studio:

C:\Program Files\nodejs\npx.cmd --yes create-react-app "C:\Users\Admin\source\reactproject1\tempProjectCreation" --use-npm --template typescript && cd /D C:\Users\Admin\source\reactproject1\tempProjectCreation && npm i --save-dev jest-editor-support eslint-config-react-app
Cannot create a project named "tempProjectCreation" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.
Press any key to continue . . .

The IDE fails to create the new react template site. Apparently Node.js now forbids Uppercase for file portability reasons.

The solution would seem simple (as the error points out) - simply change the name of "tempProjectCreation" to "tempprojectcreation" (lowercase) and it should work. In fact, I executed the "npx.cmd" command above and renamed the tempProjectCreation to tempprojectcreation" and the website generated without issue!!

I have googled and searched my hard drive and cannot find the Visual Studio template script that might be invoking the error. In fact, I can't find where Visual Studio Template scripts are stored from my

  1. Where are the Visual Studio Template scripts? I've looked in "C:\Users{UserName}\AppData\Local\Microsoft\VisualStudio\17.0_0d978569 and they don't appear to be there.

  2. Are they editable? Is it possible to change the "tempProjectCreation" to lowercase "tempprojectcreation"?

As this is a configuration question, I'm not sure if I am missing any debug information besides the error emitted above, but I'll edit this question if necessary.

Solution

  • here are the steps that I've taken in order to be able to create a standalone React Typescript project with Visual Studio 2022 (on Windows):

    1. open a windows console (cmd) and uninstall then locally reinstall the create-react-app :

      npm uninstall -g create-react-app

      npm install -g create-react-app

    2. Navigate to this folder: C:\Users\[your_ username]\AppData\Roaming\npm\node_modules\validate-npm-package-name

    3. Edit index.js and comment out these lines of code:

      if (name.toLowerCase() !== name) { warnings.push('name can no longer contain capital letters') }