All builds now failing with Cannot divide by zero CompileError: Begins at CSS selector undefined

Describe the bug

As of today my builds keep crashing. Even ones that were building just fine 2 days ago now crash with a rather strange message of: Cannot divide by zero CompileError: Begins at CSS selector undefined

Did you try recovering your dependencies?

Yes. Deleted the node-modules and the yarn.lock file and installed from scartch

Which terms did you search for in User Guide?

Cannot divide by zero CompileError: Begins at CSS selector undefined

Environment

current version of create-react-app: 3.4.1 running from /Users/parsanasirimehr/.npm/_npx/7072/lib/node_modules/create-react-app

System: OS: macOS 10.15.7 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Binaries: Node: 12.18.2 - /usr/local/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Browsers: Chrome: 84.0.4147.89 Firefox: 79.0 Safari: 14.0 npmPackages: react: ^16.13.1 => 16.13.1 react-dom: ^16.13.1 => 16.13.1 react-scripts: 3.4.1 => 3.4.1 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. yarn install --ignore-scripts
2. yarn build

Expected behavior

That it would build. Even the commits that once built on the CI/CD server now fail with the same error

Actual behavior

it crashed.

Reproducible demo

I cannot give the project but i can give the package.json file: { “name”: “report-app”, “version”: “0.1.0”, “private”: true, “dependencies”: { “@babel/runtime”: “^7.10.5”, “@material-ui/core”: “^4.11.0”, “@material-ui/icons”: “^4.9.1”, “@material-ui/lab”: “^4.0.0-alpha.56”, “@progress/kendo-data-query”: “^1.5.4”, “@progress/kendo-drawing”: “^1.8.1”, “@progress/kendo-react-animation”: “^3.15.0”, “@progress/kendo-react-buttons”: “^3.15.0”, “@progress/kendo-react-data-tools”: “^3.15.0”, “@progress/kendo-react-dateinputs”: “^3.15.0”, “@progress/kendo-react-dialogs”: “^3.15.0”, “@progress/kendo-react-dropdowns”: “^3.15.0”, “@progress/kendo-react-excel-export”: “^3.15.0”, “@progress/kendo-react-form”: “^3.15.0”, “@progress/kendo-react-grid”: “^3.15.0”, “@progress/kendo-react-inputs”: “^3.15.0”, “@progress/kendo-react-intl”: “^3.15.0”, “@progress/kendo-react-labels”: “^3.15.0”, “@progress/kendo-react-layout”: “^3.16.0”, “@progress/kendo-react-progressbars”: “^3.16.0”, “@progress/kendo-react-upload”: “^3.16.0”, “@progress/kendo-theme-default”: “^4.20.0”, “axios”: “^0.19.2”, “cldr-core”: “^36.0.0”, “cldr-dates-full”: “^36.0.0”, “cldr-numbers-full”: “^36.0.0”, “clsx”: “^1.1.1”, “express”: “^4.17.1”, “form-data”: “^3.0.0”, “jss”: “^10.4.0”, “jss-rtl”: “^0.3.0”, “material-ui-dropzone”: “^3.4.0”, “path”: “^0.12.7”, “react”: “^16.13.1”, “react-dom”: “^16.13.1”, “react-loading-overlay”: “^1.0.1”, “react-router-dom”: “^5.2.0”, “react-scripts”: “3.4.1”, “react-spinners”: “^0.9.0”, “react-transition-group”: “^4.4.1”, “react-vis”: “^1.11.7”, “reactjs-popup”: “^1.5.0”, “uuid”: “^8.3.0” }, “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “build:development”: “REACT_APP_BRANCH=development react-scripts build”, “build:staging”: “REACT_APP_BRANCH=staging react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject”, “up”: “git push --all && git push --tags”, “analyze”: “source-map-explorer ‘build/static/js/*.js’”, “prepublish”: “yarn run build” }, “eslintConfig”: { “extends”: “react-app” }, “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/cli”: “^7.11.5”, “@babel/core”: “^7.11.5”, “@babel/preset-flow”: “^7.10.4”, “@react-native-community/eslint-config”: “^1.0.0”, “@testing-library/jest-dom”: “^4.2.4”, “@testing-library/react”: “^11.0.2”, “@testing-library/user-event”: “^7.1.2”, “babel-eslint”: “^10.1.0”, “eslint-config-fbjs”: “^3.1.1”, “eslint-config-prettier”: “^6.10.1”, “eslint-config-standard”: “^14.1.1”, “eslint-plugin-babel”: “^5.3.1”, “eslint-plugin-flowtype”: “^5.2.0”, “eslint-plugin-import”: “^2.22.0”, “eslint-plugin-jsx-a11y”: “^6.3.1”, “eslint-plugin-node”: “^11.1.0”, “eslint-plugin-prettier”: “^3.1.3”, “eslint-plugin-promise”: “^4.2.1”, “eslint-plugin-react”: “^7.20.6”, “eslint-plugin-react-native”: “^3.8.1”, “eslint-plugin-standard”: “^4.0.1”, “flow-bin”: “^0.132.0”, “msw”: “^0.21.2”, “prettier”: “2.0.5”, “source-map-explorer”: “^2.4.2”, “node-sass”: “^4.14.1” } }

[SyedZaheen]

Okay, so I think I figured it out. Painstakingly commented out chunks of my CSS file to see which chunk was giving it the error.

Turns out, there is a value that you’re dividing by zero with, and it is in your CSS file. This is most likely stored in a variable, so look at the CSS variables inside your .css file and see if there are any zero-assigned variables, something like:

:root {
    --this-var: 0;
}

.class {
    transform: rotate(calc(45deg / var(--this-var)));
}

Interestingly, if you look at the rotate style above, it will actually still run in the browser without issues (not even raised in the console), but it will default the rotation value to 0. (I.e, the above will be treated as transform: rotate(0deg) )

It seems as though the react build compiler is correct in raising this issue. However, if you have some code that seems to run fine on the browser even with the 0 variable, but still want to compile it, set the above to

:root {
    --this-var: 1e-99;
}

to achieve the same effect

[thava]

Is there any scope for CRA to display better error message in such scenarios ? There was absolutely zero hints about what module or file could be the source of the problem when this “Cannot divide by zero” error was displayed. May be CRA could have caught this exception and displayed “Problem encountered processing kendo module such and such file” ? A failure that needs help from CRA core developers only to find that the problem is caused by another dependent modules without printing any hints sends shivers down my spine if this happens again on production environment.