Visual Studio React and ASP.NET Core [Typescript] template fails to build upon creation
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 290
Description
### 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](https://www.npmjs.com/package/@types/node), 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.
1. Open Visual Studio 2022 and Create a new project by selecting React and ASP.NET core template with Typescript.

2. Give it a name and press Next.
3. 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.

4. Create the project.
5. 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+10fbfbf2eRuntime 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: MsiHost:
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 setglobal.json file:
Not foundLearn more:
https://aka.ms/dotnet/infoDownload .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.09032Installed Version: Community
Visual C++ 2022 00482-90000-00000-AA661
Microsoft Visual C++ 2022ASP.NET and Web Tools 17.10.341.11210
ASP.NET and Web ToolsASP.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.0Azure Functions and Web Jobs Tools 17.10.341.11210
Azure Functions and Web Jobs ToolsC# 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 MachinesNuGet 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 (jaak@jkowalski.net)
•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 (nigels@users.sourceforge.net), Copyright ©2002-2008, Milan Ikits (milan.ikits@ieee.org), Copyright ©2002-2008, Marcelo E. Magallon (mmagallo@debian.org), Copyright ©2002, Lev Povalahev.
All rights reserved.
•LIBSSH2 Copyright ©2004-2007 Sara Golemon (sarag@libssh2.org), Copyright ©2005,2006 Mikhail Gusarov (dottedmag@dottedmag.net),Copyright ©2006-2007 The Written Word, Inc.,Copyright ©2007 Eli Fant (elifantu@mail.ru),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 ZemanThe 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 ToolsTest 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 StudioVisual 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# ToolsVisual 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 UnityWiX Toolset Visual Studio Extension 1.0.0.22
WiX Toolset Visual Studio Extension version 1.0.0.22
Copyright (c) .NET Foundation and contributors. All rights reserved.
Upon further request additional information may be made available based on relevancy.
Contributor guide
Assessment
This issue has not been assessed yet.