Search code examples
c#reactjs.netasp.net-coremiddleware

Microsoft.AspNetCore.SpaServices[0] Error on .NET Command Prompt

I am getting this error on my command prompt when I run .NET Core 3.1 based project that is using react as well in it

fail: Microsoft.AspNetCore.SpaServices[0]
      (node:15004) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

fail: Microsoft.AspNetCore.SpaServices[0]
      (Use `node --trace-deprecation ...` to show where the warning was created)
(node:15004) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

warn: Microsoft.AspNetCore.Watch.BrowserRefresh.BrowserRefreshMiddleware[4]
      Unable to configure browser refresh script injection on the response. This may have been caused by the response's Content-Encoding: 'gzip'. Consider disabling response compression.

I have searched and found a couple of answers, some were saying to add setUpMiddlewares in my middleware something lie that

spa.UseReactDevelopmentServer(npmScript: "start" , setUpMiddleware => {});

But it is not possible because this method don't have such overload.

I have tried by updating the NuGet Package to max compatible version

enter image description here

Solution

  • We can fix the issue by using following code, for more details, we can check the github issue.

    DeprecationWarning Solution:

DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] 
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated.
In file: node_modules/react-scripts/config/webpackDevServer.config.js

like this

onBeforeSetupMiddleware(devServer) {
    // Keep `evalSourceMapMiddleware`
    // middlewares before `redirectServedPath` otherwise will not have any effect
    // This lets us fetch source contents from webpack for the error overlay
    devServer.app.use(evalSourceMapMiddleware(devServer));

    if (fs.existsSync(paths.proxySetup)) {
    // This registers user provided middleware for proxy reasons
    require(paths.proxySetup)(devServer.app);
    }
},
onAfterSetupMiddleware(devServer) {
    // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
    devServer.app.use(redirectServedPath(paths.publicUrlOrPath));

    // This service worker file is effectively a 'no-op' that will reset any
    // previous service worker registered for the same host:port combination.
    // We do this in development to avoid hitting the production cache if
    // it used the same host and port.
    // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
    devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},

Change to this: 

setupMiddlewares: (middlewares, devServer) => {
    if (!devServer) {
        throw new Error('webpack-dev-server is not defined')
    }

    if (fs.existsSync(paths.proxySetup)) {
        require(paths.proxySetup)(devServer.app)
    }

    middlewares.push(
        evalSourceMapMiddleware(devServer),
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
},