addLessLoader issue when using less-loader

[luchobertello]

I'm using react-app-rewired and I've recently updated less-loader to the new version (6.0.0). My customize-cra version is 0.9.1.

I'm getting the following error when I run react-app-rewired build:

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've the config-overrides.js file like this:

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

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        "@primary-color": "#030852", // primary color for all components
      }
    }
  })
);

I added the lessOptions object but it didn't solve the problem. Could you tell me which is the proper way to set addLessLoader options?

Thanks in advance,

[cill-i-am]

Experiencing this too

[nothingrealhappen]

Seem like issue come from here: https://github.com/arackaf/customize-cra/blob/404854bcbe7436f5834e4c4863001610951d5c3c/src/customizers/webpack.js#L167-L169

[alexeikaratai]

any update ?

[luchobertello]

any update ?

No lib fixes yet

[ChromeQ]

I am also facing this issue, I can recommend trying out patch-package so that it won't block you. Install patch-package: https://www.npmjs.com/package/patch-package Add the npm scripts section: "postinstall": "patch-package" Copy this gist into your dir: <root>/patches/customize-cra+0.9.1.patch https://gist.github.com/ChromeQ/030641ff9a8d91340138c1871ca6bea1 Run npm install or yarn install and it will patch the package and you can then carry on

Subscribe to this issue to know when it closes and is fixed, then simply delete the patch and clean up as necessary

[renhao123]

same problem ！！！ I‘ve rolled back the less and less-loader edit to 2.73 , 4.10. Then the problem resolved. but, it's really not a good ideal.

[lchunxiu]

same problem

[TingLen]

same problem [email protected] will throw it you can install [email protected], its fix to me

[Wulawa]

need use customize-cra@next and lessOption

[ChromeQ]

I can also confirm Wulawa's answer, just install customize-cra@next and it works just fine. See the diff here: https://github.com/arackaf/customize-cra/compare/next

I'm not very confident on the author fixing this issue with the various PR's that have been created for him and the build up of comments on these issues, and the next branch has not been committed to since November. Try installing next version

[luchobertello]

I can also confirm Wulawa's answer, just install customize-cra@next and it works just fine. See the diff here: https://github.com/arackaf/customize-cra/compare/next

I'm not very confident on the author fixing this issue with the various PR's that have been created for him and the build up of comments on these issues, and the next branch has not been committed to since November. Try installing next version

This is a workaround. It works fine with customize-cra v1.0.0-alpha.0

[AO19]

Still does not work for me.

I'm using this in combination with Ant Design, to customize the less library.

"less-loader": "^6.1.0",
"customize-cra": "^1.0.0-alpha.0",

[SamKirkland]

Still does not work for me.

I'm using this in combination with Ant Design, to customize the less library.

"less-loader": "^6.1.0",
"customize-cra": "^1.0.0-alpha.0",

I wasn't able to get the alpha version to work with antd. A few issue tickets were made and antd now recommends craco . I switched and haven't had a problem with it.

[cill-i-am]

Still does not work for me. I'm using this in combination with Ant Design, to customize the less library.

"less-loader": "^6.1.0",
"customize-cra": "^1.0.0-alpha.0",

I wasn't able to get the alpha version to work with antd. A few issue tickets were made and antd now recommends craco . I switched and haven't had a problem with it.

I did the same. Can confirm that it's working flawlessly for me

[Anish-Agnihotri]

Hey folks,

The changes in the @next branch have been pushed upstream and merged into master. Please follow the migration guide in #253, which will have you nest your configuration in the lessOptions object.

Hopefully this resolves a majority of the issues in the thread. Please do let me know if you still run into issues; I'll keep this issue thread open for a few days.

[ZeroTo0ne]

I also have the same problem. First of all, I downgrade my less-loader version to 5.0.0. Then, It is a new problem that #199 occurs. To resolve #199 by installing css-loader.

The following is my config file :

1. package.json

"less-loader": "5.0.0"
"css-loader": "2.1.1"

2. config-overrides.js

 addLessLoader({
    lessOptions: {
      modifyVars: getThemeVariables({
        dark: true,
        compact: true,
      }),
      javascriptEnabled: true,
      localIdentName: '[path][name]__[local]--[hash:base64:5]',
    },
  })

[Anish-Agnihotri]

Hi @ZeroTo0ne,

Can you try the following:

1. Update your less-loader back to latest.
2. Update customize-cra to version 1.0 (the latest).
3. Update your config-overrides.js to:

addLessLoader({
    lessOptions: {
      modifyVars: getThemeVariables({
        dark: true,
        compact: true,
      }),
      javascriptEnabled: true,
	  cssModules: {
		localIdentName: '[path][name]__[local]--[hash:base64:5]',
      }
    },
  })

We've pushed out a change in the latest customize-cra which should resolve the issue you're facing. Let me know if it works/doesn't work for you.

[ZeroTo0ne]

Hi @Anish-Agnihotri , Thanks for your advice. I have updated my less-loader,customize-cra andcss-loaderto latest. Then I have faced a new problem that looks like below :

antTreeFn(@tree-prefix-cls);
^
JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'

The config-overrides.js file has a little change that I moved modifyVars property to a cssLoaderOptions in lessOptions.

{
    lessOptions: {
      cssLoaderOptions: {
        modifyVars: getThemeVariables({
          dark: true,
          compact: true,
        }),
      },
      javascriptEnabled: true,
      cssModules: {
        localIdentName: '[path][name]__[local]--[hash:base64:5]',
      },
    },
  }

Then it works well.

[AO19]

I'm getting the following error:

./src/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??
ref--6-oneOf-7-3!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-4!./src/style/index.less)

.my-button-blue-1 {
  background-color: @my-blue-1;
                  
Variable @my-blue-1 is undefined
      Error in D:\Projects\example\frontend\src\style\button.less (line 2, column 20)

My config:

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');

const customTheme = lessToJs(
  fs.readFileSync(path.join(__dirname, './src/style/myAntdTheme.less'), 'utf8'),
);
const myColors = lessToJs(
  fs.readFileSync(path.join(__dirname, './src/style/colors.less'), 'utf8'),
);

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      modifyVars: { ...customTheme, ...myColors },
      javascriptEnabled: true,
    }
  }),
);

Versions:

"customize-cra": "^1.0.0",
"less": "^3.11.1",
"less-vars-to-js": "^1.3.0",
"babel-plugin-import": "^1.13.0",
"less-loader": "^6.1.0",
"antd": "^4.2.5",
"react-app-rewired": "^2.1.5",

EDIT: Switched to craco-antd.

[Miindaugas]

Same issiue here with Antd design.

"less": "3.12.2",
"less-loader": "6.2.0",
"customize-cra": "1.0.0",

Failed to compile. ./node_modules/antd/es/style/index.less TypeError: this[MODULE_TYPE] is not a function

[trungnguyencmu]

// package.json
"devDependencies": {
    "customize-cra": "1.0.0-alpha.0",
    "less": "^4.1.1",
    "less-loader": "6",
    "react-app-rewired": "^2.1.8"
}

//config-overrides.js
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        //general
        "@body-background": "#F4F4F4",
        "@primary-color": "#FF467B",
        "@label-color": "#111D5E",
        "@text-color": "#111D5E",
        "@link-color": "#FF467B",
        "@border-width-base": "0px",
        "@border-radius-base": "4px",
        "@font-size-lg": "14px",
        "@font-family": "Inter, Arial, sans-serif",
        "@font-size-base": "14px",
        "@height-base": "44px",
        "@height-lg": "44px",
        "@height-sm": "24px",
        //Input
        "@input-color": "#111D5E",
        "@input-height-base": "44px",
        "@input-height-lg": "44px",
        "@input-height-sm": "40px",
        "@input-bg": "#f4f4f4",
        //form
        "@form-vertical-label-padding": "0 0 2px",
        "@form-item-label-font-size": "12px",
        "@form-item-margin-bottom": "20px",
        "@btn-font-weight": "600"
      }
    }
  })
);

important : change import "antd/dist/antd.css"; to import "antd/dist/antd.less"; in index.js

[okankrdg]

I solved fix by installing customize-cra-less-loader

package.json:

"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",

config-override.js:

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

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
  })
);

[yuuk]

I solved fix by installing customize-cra-less-loader

package.json:

"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"less": "^4.1.2",
"less-loader": "^10.2.0",

config-override.js:

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

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
  })
);

It works for me!