Search code examples
c#vue.jsasp.net-corevuex

ASP.Net Core 3.0 web application and Vue time out exception Visual Studio 2019 v16.4


I just started learning Vue, so I created an ASP.Net core 3.0 web application with client side of Vue.js, when I host web it take too long to be up at the end I got the below exception,

TimeoutException: The vue-cli server did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information. VueCliMiddleware.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message)

and the stack is :

VueCliMiddleware.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message) Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s) Microsoft.AspNetCore.Builder.SpaProxyingExtensions+<>c__DisplayClass2_0+<b__0>d.MoveNext() Microsoft.AspNetCore.Routing.EndpointMiddleware.g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger) Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

I searched the problem, they suggested to increase the timeout like below:

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.Options.StartupTimeout = new TimeSpan(days: 0, hours: 0, minutes: 1, seconds: 30);
        spa.UseAngularCliServer(npmScript: "start");
    }
});

But my app isn't Angular it is Vue.

Update 1:
Part of package.json:

{
  "name": "asp-net-core-vue-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },  

By running npm start in client directory I have got the below prompts:

npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:

npm ERR! C:\x.log

and the log content:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:435:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:433:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:281:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:115:16
4 verbose stack at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
5 verbose cwd I:\hospital\hospitalrun2\HospitalReport\ClientApp
6 verbose Windows_NT 10.0.18363
7 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
8 verbose node v13.3.0
9 verbose npm v6.13.1
10 error missing script: start
11 verbose exit [ 1, true ]

After fixing JavaScript exceptions I still get that above timeout exception, I published the app, there is no timeout exception in production, I don't know what is going wrong in debug mode.


Solution

  • This can be caused by any simple javascript or typescript syntax error when initializing Vue objects or similar.

    The vue-cli server did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information.
    

    To solve the issue

    Attempt to restart the vue server via command line in the command prompt (npm run serve in my case). A proper error message should display, hopefully showing the exact location of a syntax error.

    Fix the error and restart server.

    Other solution:

    • When there is no syntax error, ending all Node.js processes before starting the server again (eg. in task manager or by command line) fixes it for me