Ng-zorro-antd: Cannot read property 'numerator' of undefined

[quangquy87]

Steps to reproduce

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

What is actually happening?

Error: ./src/theme.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js):

// ================================================================
.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);
^
Cannot read property 'numerator' of undefined
Error in C:\Users\quang\Documents\PROJECT\DEMO\PROJECT-NAME\node_modules\ng-zorro-antd\table\style\size.less (line 53, column 0)
at runLoaders (C:\Users\quang\Documents\PROJECT\DEMO\PROJECT-NAME\node_modules\webpack\lib\NormalModule.js:316:20)
at C:\Users\quang\Documents\PROJECT\DEMO\PROJECT-NAME\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\quang\Documents\PROJECT\DEMO\PROJECT-NAME\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\quang\Documents\PROJECT\DEMO\PROJECT-NAME\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.lessLoader (C:\Users\quang\Documents\PROJECT\DEMO\PROJECT-NAME\node_modules\less-loader\dist\index.js:57:5)

| Environment | Info |
|---|---|
| ng-zorro-antd | 11.0.2 |
| Browser | Chrome |

[LingerInside]

update your package.json

"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.0"
}

[ETXIN]

npm i -D @angular-devkit/[email protected]

Need "less" for version 3.x
https://github.com/ant-design/ant-design/issues/23125#issuecomment-757678485

[quangquy87]

update your package.json

"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.0"
}

I still get the same error

[keyant]

要把 less 降级到 3.x : npm i -D less@3

[mrbusche]

Looks like this is an issue again in Angular 11.1.1. Downgrading to 11.1.0 for Angular and using ng-zorro-antd 11.1.0 is successful.

[qpxtWhite]

Looks like this is an issue again in Angular 11.1.1. Downgrading to 11.1.0 for Angular and using ng-zorro-antd 11.1.0 is successful.

still error with [email protected] and [email protected]

[vthinkxie]

Hi, everyone
if you still meet this issue, plz try the following steps

1. if you have a custom theme.less file, plz try update it following https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
2. if you have your less.js functions, plz note there is breakchange in less 4.0 https://github.com/less/less.js/pull/3573

[aescobar-icc]

Hi, everyone
if you still meet this issue, plz try the following steps

1. if you have a custom theme.less file, plz try update it following https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
2. if you have your less.js functions, plz note there is breakchange in less 4.0 less/less.js#3573

for the step 1, just add the line on the top:
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

[mrbusche]

For me the issue was prettier had removed ( and ) it thought wasn't needed. I didn't realize this until I compared our custom theme.less with the default mentioned here.

@table-padding-vertical-md: @table-padding-vertical * 3 / 4; should be
@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);

Hi, everyone
if you still meet this issue, plz try the following steps

1. if you have a custom theme.less file, plz try update it following https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
2. if you have your less.js functions, plz note there is breakchange in less 4.0 less/less.js#3573