title: Cannot set property 'styles' of undefined in next js during add less support
body: <p>I am trying to add support for the less file to my next js project with the antd design but getting cannot set property 'styles' of undefined. I want to customize the antd theme but that error is a blocker for me anyone have any idea please help me to solve this problem</p>
  <p>//error screenshot
  <a href="https://i.stack.imgur.com/GB9AA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GB9AA.png" alt="enter image description here" /></a></p>
  <p>// next.config.js file</p>
  <pre><code>const lessToJs = require('less-vars-to-js');
  const fs = require('fs');
  const path =  require('path');
  const withPlugins = require('next-compose-plugins');
  const withLess = require(&quot;@zeit/next-less&quot;);
  const withCSS = require(&quot;@zeit/next-css&quot;);
  const themeVariable =  lessToJs(fs.readFileSync(path.join(__dirname, './styles/antd-custom.less'), 'utf8'));
  
  const nextConfig = {}
  
  module.exports = withPlugins(
      [
          [
              withLess({
                  lessLoaderOptions: {
                      javascriptEnabled: true,
                      modifyVars: themeVariable,
                  },
                  webpack: (config, {isServer}) =&gt; {
                      if (isServer) {
                          const antStyles = /antd\/.*?\/style.*?/;
                          const origExternals = [...config.externals];
                          config.externals = [
                              (context, request, callback) =&gt; {
                                  if (request.match(antStyles)) return callback();
                                  if (typeof origExternals[0] === &quot;function&quot;) {
                                      origExternals[0](context, request, callback);
                                  } else {
                                      callback();
                                  }
                              },
                              ...(typeof origExternals[0] === &quot;function&quot; ? [] : origExternals),
                          ];
  
                          config.module.rules.unshift({
                              test: antStyles,
                              use: &quot;null-loader&quot;,
                          });
                      }
                      // config.resolve.alias[&quot;relay&quot;] = path.join(
                      //     __dirname,
                      //     &quot;__generated__&quot;,
                      //     &quot;relay&quot;
                      // );
                      return config;
                  }
              }),
          ],
          [withCSS],
      ],
      nextConfig
  )
  </code></pre>
  <p>//antd-custom.less file</p>
  <pre><code>@import &quot;./variables.less&quot;;
  
  @primary-color: @green-6;
  @processing-color: @green-6;
  @font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
  Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  @link-hover-decoration: underline;
  @input-hover-border-color: @green-6;
  @border-radius-base: 5px;
  @label-color: @gray-6;
  @table-header-bg: @gray-2;
  @table-header-color: @gray-6;
  @menu-item-active-bg: @gray-1;
  @menu-item-color: @gray-6;
  @tooltip-bg: @gray-10;
  // Input
  @input-border-color: @gray-4;
  @input-placeholder-color: @gray-6;
  </code></pre>