Ошибка javascriptEnabled без загрузчика Webpack

Question

Я получал эту ошибку, когда перешел с less-loader версии 6.0.0 на версию 6.1.0 при попытке загрузить мою библиотеку Ant Design в свой интерфейс с помощью Webpack . Я хотел узнать, была ли у кого-нибудь еще эта проблема, и решил ее ( Я ответил на нее ниже ).

Вот моя конфигурация компиляции LESS до обновления:

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

Answer 1

В «less-loader» версии 6.1.0 ^ они внесли критические изменения в загрузчик, которые, если вы используете что-то вроде Ant Design (или другие загрузчики LESS и JS), вы обычно добавляете флаг javascriptEnabled: true к объект «options» в конфигурации Webpack .

В версии 6.1.0 ^ это изменение было помещено в объект lessOptions под options конфигурация для меньшего загрузчика. Вот решение, которое я использовал, которое работает для моего пакета конфигурации Webpack .

module: { rules: [{
    test: /\.less$/,
    use: [
        { loader: "style-loader" },
        { loader: "css-loader" },
        {
            loader: "less-loader",
            options: {
                lessOptions: {
                    javascriptEnabled: true,
                }
            }
        }
    ]
}]}

Обратите внимание, что флаг javascriptEnabled находится не под объектом options верхнего уровня, а вместо этого он находится под подобъектом lessOptions. Это последний обновленный стандарт less-loader версии 6.1.0 ^ .