'The command "npm install" exited with code 1' error when building an ASP.NET Core app with React on macOS

Question

I'm creating a React.js app with asp.net core on mac OS 12.0.1, I'm trying to build and run this app after initial settings:

but then I get this error:

/Users/user/Projects/NameProject/NameProject/NameProject.csproj(5,5):Error MSB3073: The command "npm install" exited with code 1. (MSB3073)

Here are my logs:

Building ReactReduxNetTest (Debug)
Build started 11/18/2021 10:56:27 AM.
__________________________________________________
Project "/Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/ReactReduxNetTest.csproj" (Build target(s)):

Target GenerateTargetFrameworkMonikerAttribute:
  Skipping target "GenerateTargetFrameworkMonikerAttribute" because all output files are up-to-date with respect to the input files.
Target CoreGenerateAssemblyInfo:
  Skipping target "CoreGenerateAssemblyInfo" because all output files are up-to-date with respect to the input files.
Target _DiscoverMvcApplicationParts:
  Skipping target "_DiscoverMvcApplicationParts" because all output files are up-to-date with respect to the input files.
Target _CoreGenerateRazorAssemblyInfo:
  Skipping target "_CoreGenerateRazorAssemblyInfo" because all output files are up-to-date with respect to the input files.
Target CoreCompile:
  Skipping target "CoreCompile" because all output files are up-to-date with respect to the input files.
Target GenerateStaticWebAssetsManifest:
  Skipping target "GenerateStaticWebAssetsManifest" because all output files are up-to-date with respect to the input files.
Target _GenerateScopedCssFiles:
  Skipping target "_GenerateScopedCssFiles" because it has no outputs.
Target ResolveTagHelperRazorGenerateInputs:
  Skipping target "ResolveTagHelperRazorGenerateInputs" because all output files are up-to-date with respect to the input files.
Target RazorCoreGenerate:
  Skipping target "RazorCoreGenerate" because all output files are up-to-date with respect to the input files.
Target CoreGenerateRazorTargetAssemblyInfo:
  Skipping target "CoreGenerateRazorTargetAssemblyInfo" because all output files are up-to-date with respect to the input files.
Target RazorCoreCompile:
  Skipping target "RazorCoreCompile" because all output files are up-to-date with respect to the input files.
Target _CopyFilesMarkedCopyLocal:
    Touching "/Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/obj/Debug/net5.0/ReactReduxNetTest.csproj.CopyComplete".
Target _CopyOutOfDateSourceItemsToOutputDirectory:
  Skipping target "_CopyOutOfDateSourceItemsToOutputDirectory" because all output files are up-to-date with respect to the input files.
Target GenerateBuildDependencyFile:
  Skipping target "GenerateBuildDependencyFile" because all output files are up-to-date with respect to the input files.
Target GenerateBuildRuntimeConfigurationFiles:
  Skipping target "GenerateBuildRuntimeConfigurationFiles" because all output files are up-to-date with respect to the input files.
Target CopyFilesToOutputDirectory:
    ReactReduxNetTest -> /Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/bin/Debug/net5.0/ReactReduxNetTest.dll
Target _RazorCopyFilesToOutputDirectory:
    ReactReduxNetTest -> /Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/bin/Debug/net5.0/ReactReduxNetTest.Views.dll
    Touching "/Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/obj/Debug/net5.0/ReactReduxNetTest.csproj.CopyComplete".
Target DebugEnsureNodeEnv:
    node --version
    v12.16.1
    Restoring dependencies using 'npm'. This may take several minutes...
    npm install
    npm ERR! code EJSONPARSE
    npm ERR! file /Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/ClientApp/package.json
    npm ERR! JSON.parse Failed to parse json
    npm ERR! JSON.parse Unexpected token } in JSON at position 1528 while parsing near '...sh": ">=4.17.21",
    npm ERR! JSON.parse   },
    npm ERR! JSON.parse   "browserslist":...'
    npm ERR! JSON.parse Failed to parse package.json data.
    npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/user/.npm/_logs/2021-11-18T14_56_28_644Z-debug.log
    /Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/ReactReduxNetTest.csproj(30,5): error MSB3073: The command "npm install" exited with code 1.
Done building target "DebugEnsureNodeEnv" in project "ReactReduxNetTest.csproj" -- FAILED.

Done building project "ReactReduxNetTest.csproj" -- FAILED.

Build FAILED.

/Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/ReactReduxNetTest.csproj(30,5): error MSB3073: The command "npm install" exited with code 1.
    0 Warning(s)
    1 Error(s)

Time Elapsed 00:00:01.03

========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

Build: 1 error, 0 warnings

Answer 1

Open cmd or PowerShell then run the following commands:

npm install -g webpack

npm install -g webpack-cli

Answer 2

This error log points out what's happening:

    npm install
    npm ERR! code EJSONPARSE
    npm ERR! file /Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/ClientApp/package.json
    npm ERR! JSON.parse Failed to parse json
    npm ERR! JSON.parse Unexpected token } in JSON at position 1528 while parsing near '...sh": ">=4.17.21",
    npm ERR! JSON.parse   },
    npm ERR! JSON.parse   "browserslist":...'
    npm ERR! JSON.parse Failed to parse package.json data.
    npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm is trying to parse /Users/user/Projects/ReactReduxNetTest/ReactReduxNetTest/ClientApp/package.json but it can't, because it found an unexpected character in the package.json file.

This is actually a bug in the .NET templates that have a malformed package.json file: https://github.com/dotnet/aspnetcore/issues/37520

To fix it, remove the extra comma in ">=4.17.21", in this line in package.json:

   "lodash": ">=4.17.21", 
 },

It should look like this:

   "lodash": ">=4.17.21"
 },

That is the same as the fix Microsoft made in the .NET template here.