Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js):

Question

Here is the package.json from my project, I've ran npm install.

{
  "name": "myProject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.0.0",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.20.2",
    "@craco/craco": "^7.0.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.8.1",
    "axios": "^0.19.2",
    "babel-preset-react-app": "^9.1.2",
    "connected-react-router": "^6.8.0",
    "craco-less": "^2.0.0",
    "i18next": "^19.7.0",
    "react": "^16.14.0",
    "react-dom": "^16.13.1",
    "react-i18next": "^11.7.2",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^5.0.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-loader": "^8.1.0",
    "less-loader": "^11.1.0"
  }
}

after ran npm start, I've got this error

Compiled with problems:X ERROR in./src/index.less (./node_modules/css-loader/dist/cjs.js??> > ruleSet[1].rules[1].oneOf[9].use[1]../node_modules/postcss-loader/dist/cjs?js?.ruleSet[1].rules[1].oneOf[9].use[2].?/node_modules/resolve-url-loader/index?js..ruleSet[1].rules[1].oneOf[9].use[3]??/node_modules/craco-less/node_modules/less-loader/dist/cjs.js..ruleSet[1].rules[1].oneOf[9].use[4]!./src/index.less)

Module build failed (from./node_modules/craco-less/node_modules/less-loader/dist/cjs.js): // ================================================================.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md); ^ Operation on an invalid type Error in /Users/user/audien/node_modules/antd/lib/table/style/size.less (line 53, column 0)

I've tried to lower less-loader to version 5.0.0, but it still doesn't work.

Answer 1

Set math as always in your less options
math: 'always'

In your craco.config.js

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            math: 'always',
            modifyVars: { '@primary-color': '#6b75e3' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};