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