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

[rohanmayya]

• 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? }

Environment	Info
antd	4.1.5
React	16.13.1
System	Microsoft Windows Version 1909 (OS Build 18363.778)
Browser	Google Chrome - Version 81.0.4044.122 (Official Build) (64-bit)

---

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.

[afc163]

#23603
#23596

less-loader@5

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

less-loader@6

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

[yoyo837]

@afc163 手动触发一下部署？

[hassaanp]

Please pin this issue to avoid duplication.

[Brunno-DaSilva]

I believe have the same issue:

Error:
_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? }_

I followed the steps here: https://ant.design/docs/react/use-with-create-react-app

[nothingrealhappen]

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

[preshonyee]

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

[nothingrealhappen]

Thanks @preshonyee I've updated my comments and repo point to 5.0.0

[Xuhao]

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

[pitops]

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

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

[rexuli]

For the one who is using 'create-react-app' to customize the theme can check the following settings:

craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: { "@primary-color": "#018a9e" },
          },
        },
      },
    },
  ],
};

package.json

{
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.2.5",
    "craco-less": "^1.17.0",
    "eslint-plugin-prettier": "^3.1.3",
    "lodash": "^4.17.15",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5"
  },
}

[freyhill]

package.json:
"less-loader": "^6.1.0"

config-overrides.js
addLessLoader({ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': 'red' }, }, })

[zhang14725804]

config-overrides.js

fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#1DA57A' },
            // localIdentName:'[local]--[hash:base64:5]'
        },
    }),

package.json

"@craco/craco": "^5.2.4",
    "@types/jest": "24.0.17",
    "@types/jquery": "^3.3.31",
    "@types/node": "12.7.0",
    "@types/react": "16.8.24",
    "@types/react-dom": "16.8.5",
    "@types/react-router-dom": "^4.3.4",
    "antd": "^3.21.2",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.0",
    "compression-webpack-plugin": "^3.0.0",
    "craco-antd": "^1.11.0",
    "customize-cra": "^1.0.0",
    "echarts": "^4.2.1",
    "jquery": "^3.4.1",
    "less": "~3.12.2",
    "less-loader": "^6.1.0",
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "typescript": "3.5.3",
    "webpack-bundle-analyzer": "^3.4.1"

customize the theme. but it did not work for me. what`s wrong with me.how to solving the fucking issue

@jhsu @vio @pmq20 @troynt @kant

[aziouiz]

For anyone still having this issue, the problem comes from the fact that the package "customize-cra" introduced breaking changes with the function addLessLoader.
Fortunately, someone fixed it by creating this package : "customize-cra-less-loader".
First install the dependency :
yarn add customize-cra-less-loader
Then change your config-overrides.js to :

const { override, fixBabelImports } = require('customize-cra');
const addLessLoader = require("customize-cra-less-loader");

module.exports = override(
// Load antd
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
// Add javascriptEnabled and antd theme configuration
// to the Less loader
addLessLoader({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}
}
}),
);