npm install succeeds but npm run start fails to find both rimraf and react-scripts despite them being installed

Question

Running Windows 10 (Build 18362), using Node.js v10.16.0, npm v6.9.0, and .Net Core v2.2.300. I created a sample React/Redux application in Visual Studio 2017 via File->New Project, selecting ASP.NET Core Web Application, then selecting React.js and Redux. However, when starting the application via Visual Studio, the browser encounters a 500 error and says:

An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the create-react-app server was listening for requests. The error output was: 'rimraf' is not recognized as an internal or external command,

operable program or batch file.
npm ERR! code ELIFECYCLE

npm ERR! errno 1
npm ERR! WebApplication1@0.1.0 start: `rimraf ./build && react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the WebApplication1@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

To start, I've uninstalled and reinstalled node and npm, deleted node_modules and re-ran npm install . I rebooted before and after re-installing node.

I know that rimraf is installed in the local .\\node_modules directory, as I can successfully run .\\node_modules\\.bin\\rimraf . And react-scripts start starts the react portion of the application successfully if I run .\\node_modules\\.bin\\react-scripts start , but why would npm fail to find this?

It's to my understanding that npm adds the local node_modules\\.bin to the PATH at the time of script execution, yet it still fails to find both rimraf and react-scripts despite them being accessible if providing an absolute path to the shell.

I have also tried adding .\\node_modules\\.bin to my system PATH, which allows me (provided I'm in the root of my app directory) to just run react-scripts start and have the application load, but npm run start still fails.

Here is my package.json:

{
  "name": "WebApplication1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "3.3.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.8",
    "react-scripts": "^1.1.5",
    "reactstrap": "^6.3.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "rimraf": "^2.6.2"
  },
  "devDependencies": {
    "ajv": "^6.0.0",
    "babel-eslint": "^7.2.3",
    "cross-env": "^5.2.0",
    "eslint": "^4.1.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.3",  
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  }
}

Answer 1

有同样的问题，而不是调试选项 IIS Express，选择调试选项 [您的应用程序名称]。

Answer 2

I resolved this running the ClientApp separately with yarn start and changing a command on Configure method of Startup.cs file:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        //spa.UseReactDevelopmentServer(npmScript: "start");  <--- Remove this line

        // ****
        // **** Add this line
        // ****
        spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    }
});

This enables it to start and restart faster. It's no longer waiting for your React app to rebuild each time.

Used as reference: https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-3.1&tabs=netcore-cli

Answer 3

It could likely be a pathing problem. In my case, instead of a vanilla .Net core web project I am hosting a WebHost inside of a TopShelf service. I noticed that the path it gets executed from is different than the one generated via the project template: dotnet new react -o my-new-app .

In the project template version it runs rimraf from the ClientApp folder, whereas in my app it was running from the bin\\Debug\\netcoreapp3.0 folder. Changing my ClientApp\\package.json to reference the correct path fixes the problem though I wish there was a better solution:

"scripts": {
  "start": "cd ../../../../ClientApp && cd && .\\node_modules\\.bin\\rimraf ./build && .\\node_modules\\.bin\\react-scripts start",
}

Answer 4

I had de the same problem. I am using VStudio 2019 and I was doing a React test App.

I had created the APP, then in that directory I installed node and npm. I think that was the mistake.

I solved it, starting from zero... I Create a New Test Directory, then installed npm in that directory (node was already installed) and finally created the APP. When I run the APP it appeared a message saying "npm installing".. and it works..

When the App is created, node and npm have to be already installed.