Error evaluating function `ceil`: argument must be a number

Question

On OSX, after I installed all of dependencies by yarn install, The webpack bundle's output keeps showing the error Error evaluating function ceil: argument must be a number. I have no idea why this happen but it works on my linux machine with the same package.json

Some info:

    webpack: "5.56.0"
    less: "^4.1.2"
    less-loader: "^10.0.1"

Here is my less-loader config:

{loader: "less-loader"}

Answer 1

It looks like the there is a change of the default options of less based on what I've found in here https://lesscss.org/usage/#less-options-math

The solution is adding the option for less-loader in webpack config as following:

{
   loader: "less-loader", 
   options: {
       lessOptions: {
           math: 'always' // <=== add this
       }
   }
}

Answer 2

Also you should change => strictMath: false

Example (my file config-overrides.js):

const addLessLoader = require("customize-cra-less-loader");

module.exports = override(
  addLessLoader({
    cssLoaderOptions: {
      sourceMap: true,
      modules: {
        localIdentName: "[hash:base64:8]",
      },
    },
    lessLoaderOptions: {
      lessOptions: {
        math: "always",
        modifyVars: { "@primary-color": "#2a4365" },
        javascriptEnabled: true,
        strictMath: false,
      },
    },
  })
);