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

Question

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

Anish-Agnihotri opened this issue 5 years ago · 20 comments

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.

Answer 1 · 2020-06-02T16:38:42.000Z

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": "customize-cra@1.0.0",

Any suggestions?

Answer 2 · 2020-06-03T13:05:13.000Z

@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.

Answer 3 · 2020-06-11T11:49:10.000Z

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.

Answer 4 · 2020-09-24T20:03:01.000Z

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.

Answer 5 · 2021-01-02T15:34:31.000Z

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

Answer 6 · 2021-01-02T15:58:54.000Z

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.

Answer 7 · 2021-01-02T16:09:21.000Z

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.

Answer 8 · 2021-01-02T16:17:39.000Z

@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?

Answer 9 · 2021-01-02T16:22:13.000Z

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.

Answer 10 · 2021-01-02T16:51:58.000Z

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.

Answer 11 · 2021-01-02T16:58:19.000Z

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'); }

Answer 12 · 2021-01-02T17:01:27.000Z

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

Answer 13 · 2021-01-02T17:08:29.000Z

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
    },
  })
);

Answer 14 · 2021-01-03T03:35:27.000Z

@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' }, }, }),

Answer 15 · 2021-01-03T03:57:37.000Z

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

Answer 16 · 2021-01-03T09:36:36.000Z

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

Answer 17 · 2021-04-19T08:23:34.000Z

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?

Answer 18 · 2021-04-19T09:12:18.000Z

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.

Answer 19 · 2021-11-17T03:50:21.000Z

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.

Answer 20 · 2022-07-11T13:42:34.000Z

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,
          }
        }
      }]
    }),
  ),
};