📌📌 Breaking change: `css-loader@^3.0.0` (+`addLessLoader`) #253

Anish-Agnihotri · 2020-05-28T20:36:40Z

As part of our 1.0 release, we need to support css-loader@^3.0.0 which was added to create-react-app in #7876.

Across various issues (#231, #242, #243), the new css-loader configuration format (a switch from a boolean to options for lessOptions) has caused errors during the run and build process of customize-cra.

With version 1.0, we have introduced a fix for this, although it is a breaking change, and will require maintainers to alter their customizers configurations.

In particular, configuration options for the addLessLoader customizer will now be nested in a lessOptions object, as so:

Before:

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

Now:

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

For additional information, please see the revised docs.

If you run into issues migrating to the 1.0 release, please report the issue, and fall-back to the 0.9.1 release until I can diagnose and help you resolve your issue.

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

mjfwebb · 2020-06-02T16:38:42Z

I updated to 1.0 and changed included lessOptions: { as advised. This caused all .less files to stop loading. I removed the nested lessOptions: { object and it works fine.

My package-lock.json currently shows I am indeed on 1.0.0:

"customize-cra": {
  "version": "1.0.0",
  "resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
  "integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
  "requires": {
    "lodash.flow": "^3.5.0"
  }
},

And inside the node_modules/customize-cra package.json:

{
  "_from": "customize-cra@latest",
  "_id": "[email protected]",

Any suggestions?

Anish-Agnihotri · 2020-06-03T13:05:13Z

@mjfwebb Thanks for reporting this—that is odd, but I will take a look at it tonight and get back to you.

Please use without the nested lessOptions for the time being so that you can continue to use your .less files.

iwan-uschka · 2020-06-11T11:49:10Z

I ran into the same issue as @mjfwebb after updating customize-cra from version 0.8.0 to 1.0.0 and updating lessOptions like described in #253 (comment):

alidationError: 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? }

After upgrading my less-loader from version 5.0.0 to 6.1.0 the changes mentioned in #253 (comment) were necessary to be implemented and everything worked again.

I am using

...
"customize-cra": "^1.0.0",
"less": "^3.11.3",
"less-loader": "^6.1.0",
"react-app-rewired": "^2.1.6",
"react-scripts": "^3.4.1",
...

so i updated lessOptions in my config-overrides.js.

mjfwebb · 2020-09-24T20:03:01Z

Just wanted to confirm that my previous experience of it failing was due to my still using less-loader version 5.0.0, just as @iwan-uschka described.

After upgrading less-loader to the latest version (7.0.1 as of writing this), I was required to add lessOptions: { as originally posted.

I suggest specifically mentioning this as a caveat or gotcha.

lamdoann · 2021-01-02T15:34:31Z

How can I resolve background-image: url('public/assets/01.png') on the less files?

iwan-uschka · 2021-01-02T15:58:54Z

Hi @lamdoann, i just gave it a try at put an image at /public/images/test.png. I was able to reference it in a less file like

background: url(/images/test.png);

The background image was loaded correctly in the browser. In dev tools i can see, that the url has been adjusted:

background: url(../../../images/test.png);

Hope this helps.

lamdoann · 2021-01-02T16:09:21Z

Hi @iwan-uschka, thanks for your reply.
I got this error when loading images from public folder.
Module not found: You attempted to import ../public/assets/hand-map-02.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

iwan-uschka · 2021-01-02T16:17:39Z

@lamdoann Can you please share some code? How does your less file look like? How do you reference the image? I guess your image is located in /public/images/ right?

lamdoann · 2021-01-02T16:22:13Z

Yes, I put images in /public/assets folder.
I cannot access /public/assets folder on less files. It works when I put assets in /src.

iwan-uschka · 2021-01-02T16:51:58Z

Well, like i said, it would help if you can show some code. You haven't said anything yet about how you reference your assets inside your less files.

I am using craco to customise create-react-app. The interesting part of my .cracorc.js looks like this:

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

module.exports = function ({ env }) {
  return {
    style: {
      css: {
        loaderOptions: {
          url: false,
        },
      },
    },
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      }
    ]
  };
};

By setting css loader option url to false i am able to reference assets normally in my css (which means i can reference them normally in my less or scss files) and these assets won't be part of the bundle. This way you can reference files outside of the src directory. At least that is how I understood it :) A discussion about this issue is going on at facebook/create-react-app#9870.

Maybe you can add some configuration into your config-overrides.js like describe in https://github.com/arackaf/customize-cra/blob/master/api.md#addlessloaderloaderoptions:

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

module.exports = override(
  addLessLoader({
    cssLoaderOptions: {
      url: false
    }
  })
);

I couldn't find any dedicated documentation about customizing css loader options outside less loader scope.

lamdoann · 2021-01-02T16:58:19Z

Here is my config-overrides.js
`
const { override, addLessLoader } = require('customize-cra');

module.exports = override(
addLessLoader({
lessOptions: {
javascriptEnabled: true,
cssLoaderOptions: {
url: false
}
},
})
);
`

And my index.less
.bg { width: 100%; height: 400px; background-image: url('/public/assets/hand-map-02.png'); }

iwan-uschka · 2021-01-02T17:01:27Z

Thx! I guess this doesn't work :) If that's the case we have to wait for others to help out. Sorry..

iwan-uschka · 2021-01-02T17:08:29Z

Ah, please have a look again.

Yours

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

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      cssLoaderOptions: {
        url: false
      },
    },
  })
);

is not correct. There is no lessOptions or javascriptEnabled available in customize-cra, as far as i can see (please tell me if i missed it). cssLoaderOptions should be used as a root property of addLessLoader. Maybe this works:

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

module.exports = override(
  addLessLoader({
    cssLoaderOptions: {
      url: false
    },
  })
);

lamdoann · 2021-01-03T03:35:27Z

@iwan-uschka for new version, you can see the first comment of this topic. It will be like this:
addLessLoader({ lessOptions: { javascriptEnabled: true, modifyVars: { '@primary-color': '#A80000' }, }, }),

lamdoann · 2021-01-03T03:57:37Z

I found the way to fix it. I overrided ModuleScopePlugin plugin. It worked.
Thanks for your support @iwan-uschka

iwan-uschka · 2021-01-03T09:36:36Z

Oooops, i haven't even read the beginning of this block 😬 You're absolutely right about the new version, sorry.
Glad you made it 👍 Please paste your solution here. It might help others. Cheers

packetstracer · 2021-04-19T08:23:34Z

I've been trying to set up Ant Design with Create React App and Customize CRA but I'm getting an error when loading Less files.

TypeError: this.getOptions is not a function

My setup:

Create React App 4.0.0
React App Rewired 2.1.8
Customize CRA 1.0.0
Postcss 8.2.10
Less 4.1.1
Less Loader 8.1.1
Ant Design
Tailwind CSS

When running yarn start, I get the following error:

Failed to compile.

./src/entities/scratchpad/theme/antd/custom-theme.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./src/entities/scratchpad/theme/antd/custom-theme.less)
TypeError: this.getOptions is not a function

I have Tailwind installed and running so I guess that de postcss-loader is not the problem. I've read that the problem maybe with less-loader version, but cannot get ant version of it working.

Anyone knows why may be this happening and how to solve it?

packetstracer · 2021-04-19T09:12:18Z

Finaly got it working downgrading less loader to version 7.

Package.json
"less-loader": "^7.1.1"

ConfigOverrides.dev.js

    config = override(
      fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      }),
      addLessLoader({
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: { '@primary-color': '#13c2c2' },
        },
      }),
      addPostcssPlugins([require('tailwindcss')])
    )(config)

NOTE: that for Tailwind to load correctly I had to set the addPostcssPlugins([require('tailwindcss')]) invocation line after the addLessLoader() one.

Hope this helps to anyone.

minhthangtkqn · 2021-11-17T03:50:21Z

Finaly got it working downgrading less loader to version 7.

Package.json "less-loader": "^7.1.1"

ConfigOverrides.dev.js
    config = override(
      fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      }),
      addLessLoader({
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: { '@primary-color': '#13c2c2' },
        },
      }),
      addPostcssPlugins([require('tailwindcss')])
    )(config)
NOTE: that for Tailwind to load correctly I had to set the addPostcssPlugins([require('tailwindcss')]) invocation line after the addLessLoader() one.

Hope this helps anyone.

Hi @packetstracer,
I do my own similar to you. But I encountered a problem:
Before this, I use all SCSS (also import antd & tailwind using SCSS), so the order of compiled CSS same with scss importing order
Now, to config antd color variable, I import antd LESS & config LESS loader same as you, I also use less-loader version 7 ("less-loader": "^7.3.0"). In the compiled CSS, antd CSS appears at a different position in the file & causes much change on the UI because of CSS priority changes.
Any suggestion for my case?
Thanks for reading this.

AndrewEastwood · 2022-07-11T13:42:34Z

this config is working good too:

$ nvm current
v14.19.1

package.json

    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "customize-cra": "^1.0.0",
    "react-scripts": "^5.0.1",
    "react": "^18.2.0",
    "react-app-rewired": "^2.2.1",

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

module.exports = {
  webpack: override(
    addWebpackModuleRule({
      test: [/\.css$/, /\.less$/],
      use: ['style-loader', 'css-loader', 'postcss-loader', {
        loader: 'less-loader',
        options: {
          lessOptions: {
            strictMath: false,
            noIeCompat: true,
            modifyVars: {
              "primary-color": "#fcbf2c", // for example, you use Ant Design to change theme color.
            },
            javascriptEnabled: true,
          }
        }
      }]
    }),
  ),
};

Anish-Agnihotri added the 🧨 breaking change Require a major breaking release to implement. label May 28, 2020

Anish-Agnihotri pinned this issue May 28, 2020

This was referenced May 28, 2020

addLessLoader issue when using less-loader #241

Open

'sourceMap' seems to replace ‘source’ #248

Closed

Update less-loader options #243

Open

Fix addLessLoader on newer css-loader packages #220

Open

Fix compile error from css-loader 3 #200

Closed

IanSaucy mentioned this issue May 30, 2020

How to Set up Create React App with TypeScript, Ant Design, LESS, CSS Modules, and ESLint AleksandrHovhannisyan/aleksandrhovhannisyan.com#30

Closed

xyy94813 mentioned this issue Jun 6, 2020

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

Open

paul-vd mentioned this issue Jun 11, 2020

模版代码下载下来导入到dva搭建的项目里面，启动时报错(npm start) ant-design/ant-motion#44

Closed

packetstracer mentioned this issue Apr 19, 2021

injectBabelPlugin is broken in react-app-rewired 2.0.1 timarney/react-app-rewired#348

Closed

EvyiLdaRkmaN mentioned this issue May 15, 2021

"Cannot read property 'use' of undefined". after upgrade to react-script 4.0.1 #296

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

📌📌 Breaking change: `css-loader@^3.0.0` (+`addLessLoader`) #253

📌📌 Breaking change: `css-loader@^3.0.0` (+`addLessLoader`) #253

Anish-Agnihotri commented May 28, 2020

mjfwebb commented Jun 2, 2020

Anish-Agnihotri commented Jun 3, 2020

iwan-uschka commented Jun 11, 2020 •

edited

Loading

mjfwebb commented Sep 24, 2020

lamdoann commented Jan 2, 2021

iwan-uschka commented Jan 2, 2021

lamdoann commented Jan 2, 2021 •

edited

Loading

iwan-uschka commented Jan 2, 2021

lamdoann commented Jan 2, 2021

iwan-uschka commented Jan 2, 2021 •

edited

Loading

lamdoann commented Jan 2, 2021 •

edited

Loading

iwan-uschka commented Jan 2, 2021

iwan-uschka commented Jan 2, 2021

lamdoann commented Jan 3, 2021

lamdoann commented Jan 3, 2021

iwan-uschka commented Jan 3, 2021 •

edited

Loading

packetstracer commented Apr 19, 2021

packetstracer commented Apr 19, 2021 •

edited

Loading

minhthangtkqn commented Nov 17, 2021

AndrewEastwood commented Jul 11, 2022 •

edited

Loading

📌📌 Breaking change: css-loader@^3.0.0 (+addLessLoader) #253

📌📌 Breaking change: css-loader@^3.0.0 (+addLessLoader) #253

Comments

Anish-Agnihotri commented May 28, 2020

mjfwebb commented Jun 2, 2020

Anish-Agnihotri commented Jun 3, 2020

iwan-uschka commented Jun 11, 2020 • edited Loading

mjfwebb commented Sep 24, 2020

lamdoann commented Jan 2, 2021

iwan-uschka commented Jan 2, 2021

lamdoann commented Jan 2, 2021 • edited Loading

iwan-uschka commented Jan 2, 2021

lamdoann commented Jan 2, 2021

iwan-uschka commented Jan 2, 2021 • edited Loading

lamdoann commented Jan 2, 2021 • edited Loading

iwan-uschka commented Jan 2, 2021

iwan-uschka commented Jan 2, 2021

lamdoann commented Jan 3, 2021

lamdoann commented Jan 3, 2021

iwan-uschka commented Jan 3, 2021 • edited Loading

packetstracer commented Apr 19, 2021

packetstracer commented Apr 19, 2021 • edited Loading

minhthangtkqn commented Nov 17, 2021

AndrewEastwood commented Jul 11, 2022 • edited Loading

📌📌 Breaking change: `css-loader@^3.0.0` (+`addLessLoader`) #253

📌📌 Breaking change: `css-loader@^3.0.0` (+`addLessLoader`) #253

iwan-uschka commented Jun 11, 2020 •

edited

Loading

lamdoann commented Jan 2, 2021 •

edited

Loading

iwan-uschka commented Jan 2, 2021 •

edited

Loading

lamdoann commented Jan 2, 2021 •

edited

Loading

iwan-uschka commented Jan 3, 2021 •

edited

Loading

packetstracer commented Apr 19, 2021 •

edited

Loading

AndrewEastwood commented Jul 11, 2022 •

edited

Loading