Solvedant design Customization of theme is broken with latest version of less-loader

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/Solias99/antd-theme-demo

Steps to reproduce

(Follow the entire guide to customize theme for antd)

1. Setup a new react app using create-react-app,
2. download the dependencies required for customization of theme: less, less-loader, babel-plugin-import, antd, react-app-rewired, customize-cra
3. create the config-overrides.js file as specified by the docs, with the given code,
4. run "npm start" or "yarn start"

What is expected?

Customization of theme should be possible. In this case, I've changed the primary color. So the button must be green now instead of blue.

What is actually happening?

Console is throwing an error.
The error being:
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 'source'. These properties are valid:
  object { lessOptions?, prependData?, appendData?, sourceMap? }

It looks like this problem is happening because less-loader just had a breaking release day before yesterday. They recently shifted to 6.0.0.
Customization still works fine if the version of less loader is ~v5.

It looks like antd's docs will have to be updated to accommodate the breaking changes of v6, and temporarily ask users to shift to v5 to be able to customize theme.

#23603
#23596

less-loader@5

addLessLoader({
  javascriptEnabled: true,
  modifyVars: { '@primary-color': '#1DA57A' },
}),

less-loader@6

addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  },
}),

Workaround for less-load@6:

1. upgrade to customize-cra@next which is 1.0.0-alpha.0 currently.
2. Follow the example in the doc here:

 addLessLoader({
   lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly
     javascriptEnabled: true,
     modifyVars: { '@primary-color': '#1DA57A' },
   },
 }),

Ref: arackaf/customize-cra#201

Well I don't think customize-cra is working now, the only workaround before customize-cra fix their issue is use less-loader@5.x.

$ yarn remove less-loader

// less-loader v6.0.0 is not working
$ yarn add less-loader@5.0.0

I've created a demo repo to reproduce this issue:
https://github.com/liyaodong/antd_less_v6_bug/

related customize-cra issue:
arackaf/customize-cra#241

possible root-cause:
https://github.com/arackaf/customize-cra/blob/404854bcbe7436f5834e4c4863001610951d5c3c/src/customizers/webpack.js#L167-L169

If you are using a custom react boilerplate with webpack you can do the following

     {
        loader: 'less-loader',
        options: {
          lessOptions: {
            javascriptEnabled: true
          },
          sourceMap: true
        }
      }

Well I don't think customize-cra is working now, the only workaround before customize-cra fix their issue is use less-loader@5.x.

$ yarn remove less-loader

// less-loader v6.0.0 is not working
$ yarn add less-loader@5.0.1

the right version of less-loader@5 to use would be 5.0.0. I got an error while trying to install @5.0.1

// less-loader @5.0.0
$ yarn add less-loader@5.0.0