addLessLoader issue when using less-loader #241

luchobertello · 2020-04-27T15:03:05Z

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,

The text was updated successfully, but these errors were encountered:

Rocinante89 · 2020-04-27T22:03:08Z

Experiencing this too

liyaodong · 2020-04-28T02:55:12Z

Seem like issue come from here:

customize-cra/src/customizers/webpack.js

Lines 167 to 169 in 404854b

    
           options: Object.assign(loaderOptions, { 
        
             source: shouldUseSourceMap 
        
           })

alexeikaratai · 2020-04-29T08:45:24Z

any update ?

luchobertello · 2020-04-29T18:29:28Z

any update ?

No lib fixes yet

ChromeQ · 2020-04-30T08:39:22Z

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 · 2020-04-30T13:04:34Z

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 · 2020-05-12T07:37:08Z

same problem

TingLen · 2020-05-13T09:54:21Z

same problem
less-loader@6.x will throw it
you can install less-loader@5.0.0, its fix to me

Wulawa · 2020-05-15T04:02:23Z

need use customize-cra@next and lessOption

ChromeQ · 2020-05-15T13:34:37Z

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 · 2020-05-15T18:10:30Z

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 · 2020-05-26T11:49:21Z

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 · 2020-05-26T13:34:31Z

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.

Rocinante89 · 2020-05-26T15:01:22Z

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 · 2020-05-28T21:21:06Z

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 · 2020-05-29T02:05:40Z

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 :

package.json

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

config-overrides.js

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

Anish-Agnihotri · 2020-05-29T14:53:09Z

Hi @ZeroTo0ne,

Can you try the following:

Update your less-loader back to latest.
Update customize-cra to version 1.0 (the latest).
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 · 2020-05-31T09:06:24Z

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 · 2020-06-02T07:50:44Z

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 · 2020-08-19T23:31:11Z

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 · 2021-06-17T10:30:54Z

// 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 · 2022-02-25T15:49:48Z

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 · 2022-04-22T11:41:42Z

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!

liyaodong mentioned this issue Apr 28, 2020

Customization of theme is broken with latest version of less-loader ant-design/ant-design#23624

Closed

1 task

dbwcooper mentioned this issue May 5, 2020

Update less-loader options #243

Open

ChromeQ mentioned this issue May 7, 2020

fix: rename less-loader option #244

Closed

xyy94813 mentioned this issue Jun 6, 2020

feat(addLessLoader): can set less-loader option #255

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

addLessLoader issue when using less-loader #241

addLessLoader issue when using less-loader #241

luchobertello commented Apr 27, 2020

Rocinante89 commented Apr 27, 2020

liyaodong commented Apr 28, 2020 •

edited

alexeikaratai commented Apr 29, 2020

luchobertello commented Apr 29, 2020

ChromeQ commented Apr 30, 2020

renhao123 commented Apr 30, 2020

lchunxiu commented May 12, 2020

TingLen commented May 13, 2020 •

edited

Wulawa commented May 15, 2020

ChromeQ commented May 15, 2020

luchobertello commented May 15, 2020 •

edited

AO19 commented May 26, 2020 •

edited

SamKirkland commented May 26, 2020

Rocinante89 commented May 26, 2020

Anish-Agnihotri commented May 28, 2020

ZeroTo0ne commented May 29, 2020

Anish-Agnihotri commented May 29, 2020

ZeroTo0ne commented May 31, 2020

AO19 commented Jun 2, 2020 •

edited

Miindaugas commented Aug 19, 2020 •

edited

trungnguyencmu commented Jun 17, 2021 •

edited

okankrdg commented Feb 25, 2022

yuuk commented Apr 22, 2022

addLessLoader issue when using less-loader #241

addLessLoader issue when using less-loader #241

Comments

luchobertello commented Apr 27, 2020

Rocinante89 commented Apr 27, 2020

liyaodong commented Apr 28, 2020 • edited

alexeikaratai commented Apr 29, 2020

luchobertello commented Apr 29, 2020

ChromeQ commented Apr 30, 2020

renhao123 commented Apr 30, 2020

lchunxiu commented May 12, 2020

TingLen commented May 13, 2020 • edited

Wulawa commented May 15, 2020

ChromeQ commented May 15, 2020

luchobertello commented May 15, 2020 • edited

AO19 commented May 26, 2020 • edited

SamKirkland commented May 26, 2020

Rocinante89 commented May 26, 2020

Anish-Agnihotri commented May 28, 2020

ZeroTo0ne commented May 29, 2020

Anish-Agnihotri commented May 29, 2020

ZeroTo0ne commented May 31, 2020

AO19 commented Jun 2, 2020 • edited

Miindaugas commented Aug 19, 2020 • edited

trungnguyencmu commented Jun 17, 2021 • edited

okankrdg commented Feb 25, 2022

yuuk commented Apr 22, 2022

liyaodong commented Apr 28, 2020 •

edited

TingLen commented May 13, 2020 •

edited

luchobertello commented May 15, 2020 •

edited

AO19 commented May 26, 2020 •

edited

AO19 commented Jun 2, 2020 •

edited

Miindaugas commented Aug 19, 2020 •

edited

trungnguyencmu commented Jun 17, 2021 •

edited