Can't get server side rendering to work with Ant design using less

[jujhaar2409]

Description

I used the ant-design-less example which is on the next.js repo as a starting point for my project. I was not able to get server side rendering of the ant design component styles working in development and even after build.

To Reproduce

1. use the code in the ant design less example given in the next.js repo
2. npm run dev OR npm run build && npm start

Expected behavior

The ant design components should appear with complete styles directly from the server(check in network tab in chrome dev tools)

Current Behaviour

The components can be seen with default HTML styles for a moment before looking how they are supposed to(server side rendering not working). I can confirm this by looking at the network tab and looking for the file received from the server. It contains the elements with default HTML styles.

My code

next.config.js

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withLess = require('@zeit/next-less');
const themeVariables = require('./theme');

const secret = require('./secret');
const myConfig = {
  env: {
    ...secret,
  },
};

const lessNextConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables,
  },
  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',
      });
    }
    return config;
  },
};

module.exports = withPlugins([
  [withLess, lessNextConfig],
  [withCss],
  myConfig,
]);

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

System information

• OS: Windows
• Browser: chrome
• Version of Next.js: 9.4.4

[xwjla]

I have the same question.

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }

I changed the next.config.js.

module.exports = withLess({
  lessLoaderOptions: {
    lessOptions:{    // add the obj and it's worked for me
      javascriptEnabled: true,
    }
  }
})

You can try it.