Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I was getting this error when I moved from less-loader version 6.0.0 to version 6.1.0 when trying to load my Ant Design library into my front-end with Webpack . I wanted to know if anyone else had this issue and resolved it ( I answered it below ).

Here was my LESS compilation configuration before the update:

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
            loader: "less-loader",
            options: {
                javascriptEnabled: true,
ERROR in ./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less (./node_modules/.pnpm/registry.npmjs.org/css-loader/3.5.3_webpack@4.43.0/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/cjs.js??ref--6-2!./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less)
Module build failed (from ./node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/cjs.js):
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 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, prependData?, appendData?, sourceMap?, implementation? }
    at validate (/home/<path>/react-web/node_modules/.pnpm/registry.npmjs.org/schema-utils/2.6.6/node_modules/schema-utils/dist/validate.js:88:11)
    at Object.lessLoader (/home/<path>/react-web/node_modules/.pnpm/registry.npmjs.org/less-loader/6.1.0_webpack@4.43.0/node_modules/less-loader/dist/index.js:22:28)
 @ ./node_modules/.pnpm/registry.npmjs.org/antd/4.2.0_react-dom@16.13.1+react@16.13.1/node_modules/antd/dist/antd.less 2:26-228
 @ ./src/index.tsx
 @ multi ./src/index.tsx
In "less-loader" version 6.1.0^ they made breaking changes to the loader that, if you used something like Ant Design (or other LESS and JS loaders) you would nomally add the javascriptEnabled: true flag to the "options" object in your Webpack configuration.
In version 6.1.0^ this was change to be placed in the lessOptions object under the options configuration for the less loader. Here is the solution I used, that works for my Webpack configuration bundle.
module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
            loader: "less-loader",
            options: {
                lessOptions: {
                    javascriptEnabled: true,
Notice that the javascriptEnabled flag is not under the top-level options object, but it, instead, under the lessOptions sub-object. That is the latest updated standard as of less-loader version 6.1.0^.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.