Styles are not built correctly in React app - css

Question

The problem occurs in a React app. When I build it with react-scripts locally, everything is built perfectly and styles are the way they should be. But when the app is built with Docker, the values of some properties in styles are replaced with CSS variables that are not defined. The version of Node.js used for creating the Docker container is exactly the same as on a local machine. Also bootstrap is used in the React app. Previously there wasn't such weird behavior and everything was built perfectly and no changed to styles were made.
Here's package.json:
{
"name": "minible-react",
"version": "1.0.0",
"private": true,
"dependencies": {
"#capaj/react-select-timezone": "^3.0.0",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.0.5",
"#mui/lab": "^5.0.0-alpha.51",
"#mui/material": "^5.0.4",
"#mui/styles": "^5.0.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/date-fns": "^2.6.0",
"#visx/responsive": "^2.1.0",
"animate.css": "^4.1.1",
"apexcharts": "^3.27.3",
"availity-reactstrap-validation": "^2.7.0",
"axios": "^0.21.0",
"bootstrap": "^5.0.0-beta2",
"classnames": "^2.3.1",
"clsx": "^1.1.1",
"date-fns": "^2.23.0",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"husky": "^7.0.2",
"i18next": "^19.8.4",
"i18next-browser-languagedetector": "^6.0.1",
"leaflet": "^1.7.1",
"lint-staged": "^11.2.3",
"lodash": "^4.17.21",
"lodash.clonedeep": "^4.5.0",
"metismenujs": "^1.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.0.0",
"prop-types": "^15.7.2",
"qs": "^6.11.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-bootstrap-sweetalert": "^5.2.0",
"react-color": "^2.19.3",
"react-countup": "^4.3.3",
"react-csv": "^2.0.3",
"react-date-range": "^1.3.0",
"react-datepicker": "^3.8.0",
"react-dom": "^17.0.1",
"react-i18next": "^11.8.5",
"react-icons": "^4.4.0",
"react-infinite-scroll-component": "^6.1.0",
"react-input-mask": "^2.0.4",
"react-modal": "^3.14.4",
"react-moment": "^1.1.1",
"react-phone-input-2": "^2.14.0",
"react-places-autocomplete": "^7.3.0",
"react-redux": "^7.2.2",
"react-redux-toastr": "7.5.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-select": "^3.2.0",
"react-select-async-paginate": "^0.6.0",
"react-slider-modal": "^1.3.1",
"react-slideshow-image": "^3.6.0",
"react-table": "^7.7.0",
"react-times": "^3.1.12",
"react-timezone-select": "^1.0.2",
"react-toastr": "^3.0.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^8.9.0",
"recharts": "^2.1.0",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"save-dev": "0.0.1-security",
"simplebar-react": "^2.3.0",
"toastr": "^2.1.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#iconify-icons/bi": "^1.1.5",
"#iconify/react": "^1.1.4",
"#visx/mock-data": "^2.1.0",
"animation.css": "^0.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-react": "^7.26.1",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"redux-devtools": "^3.7.0"
}
}
Styles of component after local build
Styles of component after Docker build (all those variables are not defined)
I'll appreciate any ideas why it may be happening and how I could solve it.

Answer 1

Ive had the same issue and this solution working for me: unistall the node and Install it again.