Cannot set property 'styles' of undefined in next js during add less support

Question

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

//error screenshot

// next.config.js file

const lessToJs = require('less-vars-to-js');
const fs = require('fs');
const path =  require('path');
const withPlugins = require('next-compose-plugins');
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
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}) => {
                    if (isServer) {
                        const antStyles = /antd\/.*?\/style.*?/;
                        const origExternals = [...config.externals];
                        config.externals = [
                            (context, request, callback) => {
                                if (request.match(antStyles)) return callback();
                                if (typeof origExternals[0] === "function") {
                                    origExternals[0](context, request, callback);
                                } else {
                                    callback();
                                }
                            },
                            ...(typeof origExternals[0] === "function" ? [] : origExternals),
                        ];

                        config.module.rules.unshift({
                            test: antStyles,
                            use: "null-loader",
                        });
                    }
                    // config.resolve.alias["relay"] = path.join(
                    //     __dirname,
                    //     "__generated__",
                    //     "relay"
                    // );
                    return config;
                }
            }),
        ],
        [withCSS],
    ],
    nextConfig
)

//antd-custom.less file

@import "./variables.less";

@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;

Answer 1

You can use this zero dependency module to customize your antdesign theme in next.js project-

next-plugin-antd-less

🎉 Features

• Zero Dependency on other Next.js Plugins
• Support Both Next.js & CRA Project
• Support Hot-Update After modifying Antd less vars
• Support Serverless Mode
• Support Antd Pro

🌊 Compatibility

• next v12 & v11 (webpack 5, SWC or Babel)
• less v3.0+

To learn more on how to configure the webpack in next.config.js file check this article-

https://www.elvisduru.com/blog/how-to-customize-ant-design-theme-in-nextjs

Answer 2

I have a similar problem. I can solve with the following steps.

1. Tell NextJs to downgrade to Webpack 4

   // next.config.js 
   module.exports = withPlugins([...], {
      webpack5: false,
   })
   

2. Manually add the related dependencies with the proper version.

   yarn add --dev webpack@webpack-4 less less-loader@5