nextjs with apollo taking forever to bundle in development

Question

I am facing this issue in development, while working in Nextjs (on 9.4.4) with Apollo Micro Server (on 2.14.1) as backend and Apollo Client (on 2.6.10) on client side. Everything works fine at times and on some occasions server takes forever to bundle files for hot module reload (some times up-to 30-45 minutes). I've tried to find the solutions online or at their repository but nothing seems to work. currently my next.config.js looks like

const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  serverRuntimeConfig: {
    JWT_SECRET: 'changeme',
    MONGO_DB_URL: "mongodb://localhost:27017/example"
  },
  plugins: ['styled-jsx/babel'],
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    };
    return config;
  },
  webpack: function (config) {
        config.module.rules.push({
          test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 100000,
              name: '[name].[ext]'
            }
          }
        })
    return config;
  },
});

apart from server i am facing an other quite odd situation where CSS does not gets applied to the page and does not show an error either.