search

aspnet / JavaScriptServices

[Archived] This repository has been archived
Apache License 2.0
3.03k stars 518 forks source link

ReactRedux template throws errors out of the box #1186

Closed jjwilliams42 closed 7 years ago

jjwilliams42 commented 7 years ago

Title

When creating a new template from the dotnet new reactredux template, it does not run properly out of the box.

Functional impact

Cannot access site

Minimal repro steps

dotnet new reactredux dotnet restore npm install $Env:ASPNETCORE_ENVIRONMENT = "Development" dotnet run

Expected result

Console shows a successful build & start with no errors

Actual result

Hosting environment: Development
Content root path: C:\Projects\ProjectManagerRedux
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
fail: Microsoft.AspNetCore.NodeServices[0]
      [at-loader] Checking finished with 5 errors
fail: Microsoft.AspNetCore.NodeServices[0]
      [at-loader] Checking finished with 5 errors
info: Microsoft.AspNetCore.NodeServices[0]
      webpack built b70bfbfe90635866682e in 3082ms
fail: Microsoft.AspNetCore.NodeServices[0]
      Hash: b70bfbfe90635866682e
      Version: webpack 2.5.1
      Time: 3082ms
                   Asset      Size  Chunks                    Chunk Names
          main-client.js    414 kB       0  [emitted]  [big]  main-client
                site.css   1.56 kB       0  [emitted]         main-client
      main-client.js.map    498 kB       0  [emitted]         main-client
            site.css.map  85 bytes       0  [emitted]         main-client
      chunk    {0} main-client.js, site.css, main-client.js.map, site.css.map (main-client) 368 kB [entry] [rendered]
          [0] external "vendor_af2088012a1b2e840d4e" 42 bytes {0} [not cacheable]
          [1] delegated ./node_modules/node-libs-browser/node_modules/process/browser.js from dll-reference vendor_af2088012a1b2e840d4e 42 bytes {0} [not cacheable] [built]
         [63] ./~/react-hot-loader/patch.js 41 bytes {0} [built]
         [64] ./ClientApp/boot-client.tsx 2.19 kB {0} [built]
         [65] (webpack)-hot-middleware/client.js?path=%2F__webpack_hmr 6.68 kB {0} [built]
         [66] delegated ./node_modules/event-source-polyfill/eventsource.js from dll-reference vendor_af2088012a1b2e840d4e 42 bytes {0} [not cacheable] [built]
         [70] ./ClientApp/css/site.css 41 bytes {0} [built]
        [174] ./~/react-hot-loader/index.js 41 bytes {0} [built]
        [181] ./~/react-hot-loader/lib/patch.js 209 bytes {0} [built]
        [188] ./ClientApp/configureStore.ts 2.24 kB {0} [built]
        [199] ./~/strip-ansi/index.js 161 bytes {0} [built]
        [200] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
        [201] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
        [202] delegated ./node_modules/bootstrap/dist/js/npm.js from dll-reference vendor_af2088012a1b2e840d4e 42 bytes {0} [not cacheable] [built]
        [210] multi react-hot-loader/patch event-source-polyfill webpack-hot-middleware/client?path=%2F__webpack_hmr ./ClientApp/boot-client.tsx 64 bytes {0} [built]
           + 196 hidden modules

      ERROR in [at-loader] ./ClientApp/routes.tsx:9:12
          TS2322: Type '{ exact: true; path: "/"; component: typeof Home; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
        Type '{ exact: true; path: "/"; component: typeof Home; }' is not assignable to type 'Readonly<T>'.

      ERROR in [at-loader] ./ClientApp/routes.tsx:10:12
          TS2322: Type '{ path: "/counter"; component: typeof Counter; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
        Type '{ path: "/counter"; component: typeof Counter; }' is not assignable to type 'Readonly<T>'.

      ERROR in [at-loader] ./ClientApp/routes.tsx:11:12
          TS2322: Type '{ path: "/fetchdata/:startDateIndex?"; component: typeof FetchData; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
        Type '{ path: "/fetchdata/:startDateIndex?"; component: typeof FetchData; }' is not assignable to type 'Readonly<T>'.

      ERROR in [at-loader] ./node_modules/@types/react-router/index.d.ts:67:21
          TS2694: Namespace 'React' has no exported member 'ComponentType'.

      ERROR in [at-loader] ./node_modules/@types/react-router/index.d.ts:102:48
          TS2694: Namespace 'React' has no exported member 'ComponentType'.
      Child extract-text-webpack-plugin:
          chunk    {0} extract-text-webpack-plugin-output-filename 4.08 kB [entry] [rendered]
              [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
              [1] ./~/css-loader!./ClientApp/css/site.css 1.82 kB {0} [built]
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/__webpack_hmr
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/__webpack_hmr
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/__webpack_hmr
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/__webpack_hmr
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[1]
      Executing action method ProjectManagerRedux.Controllers.HomeController.Index (ProjectManagerRedux) with arguments ((null)) - ModelState is Valid
info: Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ViewResultExecutor[1]
      Executing ViewResult, running view at path /Views/Home/Index.cshtml.
info: Microsoft.Extensions.DependencyInjection.DataProtectionServices[0]
      User profile is available. Using 'C:\Users\jwilliams\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action ProjectManagerRedux.Controllers.HomeController.Index (ProjectManagerRedux) in 2941.2875ms
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/dist/site.css?v=Lb5HSsGvBcEgLMQZ61Nva-Lpee8TNSEJ0mFBnX5PmbQ
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/dist/vendor.css?v=2OSKmU2Rna58MvkZa-1vCDjb7C1cgTMqz-guh-WoUGU
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 16.9662ms 200 text/css; charset=UTF-8
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 3150.877ms 200 text/html; charset=utf-8
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/dist/vendor.js?v=DWcmqEa4HTnl9viXP1YecAKkHkRDogjK-LKI0Dl6Imk
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/dist/main-client.js?v=mtjxitWO_mSOlEGes9SDbY3rpFWi5Kff2U5LnsoQQA8
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 10.5292ms 200 application/javascript; charset=UTF-8
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/dist/vendor.js'. Physical path: 'C:\Projects\ProjectManagerRedux\wwwroot\dist\vendor.js'
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/dist/vendor.css'. Physical path: 'C:\Projects\ProjectManagerRedux\wwwroot\dist\vendor.css'
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 61.2527ms 200 text/css
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 35.0999ms 200 application/javascript
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/__webpack_hmr
info: Microsoft.AspNetCore.Server.Kestrel[14]
      Connection id "0HL71KMIKEC0F" communication error.
Microsoft.AspNetCore.Server.Kestrel.Internal.Networking.UvException: Error -4081 ECANCELED operation canceled
info: Microsoft.AspNetCore.Server.Kestrel[14]
      Connection id "0HL71KMIKEC0F" communication error.
Microsoft.AspNetCore.Server.Kestrel.Internal.Networking.UvException: Error -4081 ECANCELED operation canceled
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:5000/favicon.ico
info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/favicon.ico'. Physical path: 'C:\Projects\ProjectManagerRedux\wwwroot\favicon.ico'
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 2.896ms 200 image/x-icon
fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[0]
      An unhandled exception has occurred while executing the request
System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.IO.Stream.<CopyToAsyncInternal>d__27.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<PerformProxyRequest>d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
warn: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[0]
      The response has already started, the error page middleware will not be executed.
fail: Microsoft.AspNetCore.Server.Kestrel[13]
      Connection id "0HL71KMIKEC0F": An unhandled exception was thrown by the application.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.IO.Stream.<CopyToAsyncInternal>d__27.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<PerformProxyRequest>d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Hosting.Internal.RequestServicesContainerMiddleware.<Invoke>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Server.Kestrel.Internal.Http.Frame`1.<RequestProcessingAsync>d__2.MoveNext()
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 15202.4017ms 200 text/event-stream; charset=utf-8

Further technical details

node -v v7.5.0

npm -v 4.1.2

dotnet --version 1.0.4

Windows 10 x64

jjwilliams42 commented 7 years ago

Doh, I found the fix at https://github.com/aspnet/JavaScriptServices/issues/1099#issuecomment-313876245

Just in case anyone else runs into this issue and is running 1.04 dotnet, it looks like the fix is in the latest .NET Core 2.0 Preview 3 SDK, but changing your package.json to the following works:

    ...
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-redux": "4.4.45",
    "@types/react-router-dom": "4.0.6",
    "@types/react-router-redux": "5.0.3",
    ...
    "typescript": "2.3.4",