npm install 成功，但 npm run start 無法找到 rimraf 和 react-scripts 盡管它們已安裝

Question

運行 Windows 10（內部版本 18362），使用 Node.js v10.16.0、npm v6.9.0 和 .Net Core v2.2.300。 我通過 File->New Project 在 Visual Studio 2017 中創建了一個示例 React/Redux 應用程序，選擇 ASP.NET Core Web 應用程序，然后選擇 React.js 和 Redux。 但是，當通過 Visual Studio 啟動應用程序時，瀏覽器遇到 500 錯誤並說：

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.

首先，我卸載並重新安裝了 node 和 npm，刪除了 node_modules 並重新運行了npm install 。 我在重新安裝節點之前和之后重新啟動。

我知道 rimraf 安裝在本地.\\node_modules目錄中，因為我可以成功運行.\\node_modules\\.bin\\rimraf 。 和react-scripts start啟動該應用程序的反應部分成功，如果我跑.\\node_modules\\.bin\\react-scripts start ，但為什么故宮不能找到呢？

據我了解，npm 在腳本執行時將本地node_modules\\.bin到 PATH 中，但它仍然無法找到rimraf和react-scripts盡管如果提供絕對路徑到 shell 可以訪問它們。

我還嘗試將.\\node_modules\\.bin添加到我的系統路徑，這允許我（假設我在我的應用程序目錄的根目錄中）只運行react-scripts start並加載應用程序，但npm run start仍然失敗。

這是我的 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

我解決了這個問題，單獨運行ClientApp並使用yarn start並更改Startup.cs文件的Configure方法上的命令：

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");
    }
});

這使它能夠更快地啟動和重新啟動。 它不再每次都等待您的 React 應用程序重新構建。

用作參考： https : //docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-3.1&tabs=netcore-cli

Answer 3

這可能是路徑問題。 就我而言，我在 TopShelf 服務中托管了一個 WebHost，而不是普通的 .Net 核心 Web 項目。 我注意到它執行的路徑與通過項目模板生成的路徑不同： dotnet new react -o my-new-app 。

在項目模板版本中，它從 ClientApp 文件夾運行rimraf ，而在我的應用程序中，它從bin\\Debug\\netcoreapp3.0文件夾運行。 更改我的ClientApp\\package.json以引用正確的路徑可以解決問題，但我希望有更好的解決方案：

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

Answer 4

我有同樣的問題。 我正在使用 VStudio 2019 並且我正在做一個 React 測試應用程序。

我創建了 APP，然后在該目錄中安裝了 node 和 npm。 我認為那是錯誤。

我解決了，從零開始...我創建一個新的測試目錄，然后在該目錄中安裝npm（節點已經安裝），最后創建了APP。 當我運行該應用程序時，它出現一條消息說“npm 正在安裝”.. 並且它有效..

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