aspnetcore Visual Studio React and ASP.NET Core [Typescript] template fails to build upon creation

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

If we create a React and ASP.NET Core project with Typescript in Visual Studio and press F5 without modifying anything the project template fails to build with Error:

Severity	Code	Description	Project	File	Line	Suppression State	Details
Error (active)	MSB3073	The command "npm install" exited with code 1.	reactapptrial.client	C:\Users\UserName\.nuget\packages\microsoft.visualstudio.javascript.sdk\1.0.784122\Sdk\Sdk.targets	251

Error description suggests it's something with npm install. This is an area where error reporting could be improved and could be provided the actual error from npm but that's topic for another issue.

So, I opened up the terminal and cd'd into the front-end react folder (projectname.client) to do a manual npm install. Here's the output from npm now:

PS C:\Users\UserName\Documents\Visual Studio 2022\Projects\ReactAppTrial> cd .\reactapptrial.client\
PS C:\Users\UserName\Documents\Visual Studio 2022\Projects\ReactAppTrial\reactapptrial.client> npm install
npm error code ETARGET
npm error notarget No matching version found for @types/node@^22.4.0.
npm error notarget In most cases you or one of your dependencies are requesting
npm error notarget a package version that doesn't exist.
npm error A complete log of this run can be found in: C:\Users\UserName\AppData\Local\npm-cache\_logs\2024-07-09T20_10_18_409Z-debug-0.log

Looks like we found our error. It's apparently the @types/node@^22.4.0 package. Might be a caching issue on local machine? But first let's check npmjs to see if the package actually exists! From npmjs, it seems the package actually exists and as of writing this the latest version is 20.14.10 which was published 4 days ago. In its current history of 1,849 versions published there is no existence of version 22.4.0 in the package registry.

So where did this 22.4.0 came from?

If you use latest nodejs on your machine you're probably familiar with this version number. It's the version of your NodeJS. .NET 8 came out recently and on best guess, this might be an erroneous update of the package.json where it was thought the latest node version would also be the latest version for an external package. If we take a peek into the package.json file, we'll even see this package was added at the very last. Coherence would have kept it together with other @types/packages. You may take a look here:

package.json

{
  "name": "reactapptrial.client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.13.1",
    "@typescript-eslint/parser": "^7.13.1",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "typescript": "^5.2.2",
    "vite": "^5.3.1",
    "@types/node": "^22.4.0" 
  }
}

To test my assumption, I then updated the version number to current available version on npmjs. And to my surprise, the project now runs without any error. Hence proved, the bug is in the version number of this package.

Expected Behavior

The expected behavior is of course, pressing F5 on an unmodified project template to run successfully without any errors.

Steps To Reproduce

The steps to reproduce this issue are very simple and you don't even need additional code samples from us either.

Open Visual Studio 2022 and Create a new project by selecting React and ASP.NET core template with Typescript.
Give it a name and press Next.
On Additional Information section leave everything as is. On latest Visual Studio and Tooling installed it should select the Framework as .NET 8.0 (Long Term Support). If not, select it.
Create the project.
Now without modifying anything or creating anything, press F5 and wait for the build to fail.

Exceptions (if any)

Currently None.

.NET Version

8.0.302

Anything else?

dotnet --info

.NET SDK: Version: 8.0.302 Commit: ef14e02af8 Workload version: 8.0.300-manifests.ca8b4b2d MSBuild version: 17.10.4+10fbfbf2e

Runtime Environment: OS Name: Windows OS Version: 10.0.22631 OS Platform: Windows RID: win-x64 Base Path: C:\Program Files\dotnet\sdk\8.0.302\

.NET workloads installed: [maui-windows] Installation Source: VS 17.10.35013.160 Manifest Version: 8.0.40/8.0.100 Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.maui\8.0.40\WorkloadManifest.json Install Type: Msi

[aspire] Installation Source: VS 17.10.35013.160 Manifest Version: 8.0.0/8.0.100 Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.aspire\8.0.0\WorkloadManifest.json Install Type: Msi

Host: Version: 8.0.6 Architecture: x64 Commit: 3b8b000a0e

.NET SDKs installed: 8.0.106 [C:\Program Files\dotnet\sdk] 8.0.302 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.31 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.15 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.31 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.32 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.15 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.31 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 7.0.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found: x86 [C:\Program Files (x86)\dotnet] registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables: Not set

global.json file: Not found

Learn more: https://aka.ms/dotnet/info

Download .NET: https://aka.ms/dotnet/download

Visual Studio 2022 Info

Microsoft Visual Studio Community 2022 Version 17.10.3 VisualStudio.17.Release/17.10.3+35013.160 Microsoft .NET Framework Version 4.8.09032

Installed Version: Community

Visual C++ 2022 00482-90000-00000-AA661 Microsoft Visual C++ 2022

ASP.NET and Web Tools 17.10.341.11210 ASP.NET and Web Tools

ASP.NET Web Frameworks and Tools 2012 17.10.341.11210 For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0 17.10.341.11210 Azure App Service Tools v3.0.0

Azure Functions and Web Jobs Tools 17.10.341.11210 Azure Functions and Web Jobs Tools

C# Tools 4.10.0-3.24312.19+771f269b3abcbbd991f05becf8fe5e991d24b0c1 C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

Cookiecutter 17.0.24064.1 Provides tools for finding, instantiating and customizing templates in cookiecutter format.

GitHub Copilot 0.2.889.30432 GitHub Copilot is an AI pair programmer that helps you write code faster and with less work.

Image Watch 1.0

Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

NuGet Package Manager 6.10.1 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

NVIDIA CUDA 12.3 Wizards 12.3 Wizards to create new NVIDIA CUDA projects and source files.

NVIDIA Nsight Visual Studio Edition 2023.3.1.23311 NVIDIA Nsight Visual Studio Edition provides tools for GPGPU and graphics development. Copyright © NVIDIA 2010 - 2023. •Direct3D® and DirectX® are registered trademarks of Microsoft Corporation in the United States and/or other countries. •Microsoft Detours is used under the Professional license (http://research.microsoft.com/en-us/projects/detours/). •Gardens Point Parser Generator Copyright 2005 Queensland University of Technology (QUT). All rights reserved. •Icons from Axialis Software used under the licensing terms found here: www.axialis.com •NLog Copyright © 2004-2006 Jaroslaw Kowalski ([email protected]) •zlib and libpng used under the zlib/libpnc license (http://opensource.org/licenses/Zlib) •Breakpad Copyright ©2006, Google Inc. All rights reserved. •The OpenGL Extension Wrangler Library Copyright ©2008-2016, Nigel Stewart ([email protected]), Copyright ©2002-2008, Milan Ikits ([email protected]), Copyright ©2002-2008, Marcelo E. Magallon ([email protected]), Copyright ©2002, Lev Povalahev. All rights reserved. •LIBSSH2 Copyright ©2004-2007 Sara Golemon ([email protected]), Copyright ©2005,2006 Mikhail Gusarov ([email protected]),Copyright ©2006-2007 The Written Word, Inc.,Copyright ©2007 Eli Fant ([email protected]),Copyright ©2009-2014 Daniel Stenberg., Copyright ©2008, 2009 Simon Josefsson. All rights reserved. •xxHASH Library Copyright ©2012-2014, Yann Collet. All rights reserved. •FMT Copyright ©2012 - 2016, Victor Zverovich •Font Awesome Copyright 2018 Fonticons, Inc. •ELF Definitions Copyright (c) 2010 Joseph Koshy, All rights reserved. •Boost, used under the Boost Software License (https://www.boost.org/users/license.html) •gsl-lite, The MIT License (MIT), Copyright (c) 2015 Martin Moene, Copyright (c) 2015 Microsoft Corporation. All rights reserved. •Protocol Buffer, Copyright 2008 Google Inc. All rights reserved. •ThreadPool, Copyright (c) 2012 Jakob Progsch, Václav Zeman

The full text of the license for the OSS components used in this product is available as part of the Nsight Visual Studio Edition EULA (https://docs.nvidia.com/nsight-visual-studio-edition/eula/index.html).

Warning: This computer program is protected by copyright law and international treaties. Unauthorized reproduction or distribution of this program, or any portion of it, may result in severe civil and criminal penalties, and will be prosecuted to the maximum extent possible under the law.

NVIDIA Nsight Visual Studio Edition - CUDA support 2023.3.1.23311 NVIDIA Nsight Visual Studio Edition - CUDA support provides tools for CUDA development and debugging.

Python - Django support 17.0.24064.1 Provides templates and integration for the Django web framework.

Python - Profiling support 17.0.24064.1 Profiling support for Python projects.

Python with Pylance 17.0.24064.1 Provides IntelliSense, projects, templates, debugging, interactive windows, and other support for Python developers.

Razor (ASP.NET Core) 17.10.3.2427201+4f57d1de251e654812adde201c0265a8ca7ca31d Provides languages services for ASP.NET Core Razor.

Smooth Caret 2.0.0 Smooth caret movement effect for the Visual Studio text editor.

SQL Server Data Tools 17.10.172.0 Microsoft SQL Server Data Tools

Test Adapter for Boost.Test 1.0 Enables Visual Studio's testing tools with unit tests written for Boost.Test. The use terms and Third Party Notices are available in the extension installation directory.

Test Adapter for Google Test 1.0 Enables Visual Studio's testing tools with unit tests written for Google Test. The use terms and Third Party Notices are available in the extension installation directory.

TypeScript Tools 17.0.30327.2001 TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools 4.10.0-3.24312.19+771f269b3abcbbd991f05becf8fe5e991d24b0c1 Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools 17.10.0-beta.24228.1+dd749058c91585e9b5dae62b0f8df892429ee28f Microsoft Visual F# Tools

Visual Studio Color Theme Designer 1.0 Allows users to create and edit Visual Studio themes. Themes can customize colors used for menus, toolbars, tabs, titlebars, the text editor, and other environment colors.

Visual Studio IntelliCode 2.2 AI-assisted development for Visual Studio.

Visual Studio Tools for Unity 17.10.1.0 Visual Studio Tools for Unity

Upon further request additional information may be made available based on relevancy.

Jul 09 '24 21:07 abmprottoy

I'm running into this same issue.

Jul 16 '24 19:07 rowens72

I think they corrected this but added a new bug, or the VS installer isn't doing something correctly.

When I am generating a new ASP.NET with React(Typescript) project, the node version in the package.json shows up as ^20.16.0 which reflects the version my console spits out when using node -v.

However, if you delete the ^20.16.0 and check the latest version that auto-populates it only goes up to 20.14.13. This compiles fine when used it looks like.

@rowens72, if you want to confirm that the original posters fix worked, or you had to set it to 20.14.13?

Jul 29 '24 20:07 pdannell

This is still an issue. Manually setting node as described above works.

Aug 27 '24 20:08 soolafsen

Issue persists with latest Visual Studio 2022 and Node.js installations. As stated above, Visual Studio appears to be incorrectly inserting the current Node.js version into the @types/node dependency within package.json. The above solution still works, just grab the latest version from here and replace the version in the package.json file.

Nov 20 '24 17:11 Accudraft

Issue persists with latest Visual Studio 2022 and Node.js installations. As stated above, Visual Studio appears to be incorrectly inserting the current Node.js version into the @types/node dependency within package.json. The above solution still works, just grab the latest version from here and replace the version in the package.json file.

Thank you, This helped. 👍

Nov 22 '24 21:11 rowens72

Still persists with the latest VS 2022 Community Version 17.12.3:

Microsoft Visual Studio Community 2022 Version 17.12.3 VisualStudio.17.Release/17.12.3+35527.113 Microsoft .NET Framework Version 4.8.09032

Manually setting to the last node version (22.10.5) fixed it.

Jan 09 '25 09:01 Sorush-P

Issue persists with latest Visual Studio 2022 and Node.js installations. As stated above, Visual Studio appears to be incorrectly inserting the current Node.js version into the @types/node dependency within package.json. The above solution still works, just grab the latest version from here and replace the version in the package.json file.

Thanks @Accudraft, that helped a lot

Jan 09 '25 11:01 Caldas