Create-react-app: Error during project build "postcss-svgo: TypeError: Cannot set property 'multipassCount' of undefined"

[montydhanjal]

Describe the bug

Getting failed to compile error during build process on

`$ react-scripts build
Creating an optimized production build...
Failed to compile.

postcss-svgo: TypeError: Cannot set property 'multipassCount' of undefined

error Command failed with exit code 1.`

Environment

Environment Info:

System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 12.13.0 - /usr/local/bin/node
Yarn: 1.19.1 - ~/.yarn/bin/yarn
npm: 6.12.0 - /usr/local/bin/npm
Browsers:
Chrome: 78.0.3904.70
Firefox: Not Found
Safari: 13.0.3
npmPackages:
react: ^16.8.6 => 16.11.0
react-dom: ^16.8.6 => 16.11.0
react-scripts: 3.1.2 => 3.1.2
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. yarn install
   2.yarn build

Expected behavior

React build process will spit out a Build folder with project files.

Actual behavior

Package.json
{ "name": "managerviewfrontend", "version": "0.1.0", "private": true, "dependencies": { "@date-io/date-fns": "^1.3.5", "@material-ui/core": "^4.5.0", "@material-ui/icons": "^3.0.2", "@material-ui/pickers": "^3.2.6", "@sentry/browser": "^5.4.0", "@types/classnames": "^2.2.7", "@types/jest": "24.0.12", "@types/lodash": "^4.14.137", "@types/material-ui": "^0.21.6", "@types/node": "12.0.0", "@types/react": "16.8.16", "@types/react-dom": "16.8.4", "@types/react-filepond": "^5.0.3", "@types/react-router-dom": "^4.3.3", "D": "^1.0.0", "autosuggest-highlight": "^3.1.1", "axios": "^0.19.0", "axios-observable": "^1.1.2", "caman": "^4.1.2", "classnames": "^2.2.6", "connected-react-router": "^6.5.2", "core-js": "^3.2.1", "cypress": "3.5.0", "date-fns": "^2.1.0", "doka": "^0.1.0", "filepond": "^4.5.0", "filepond-plugin-image-edit": "^1.4.0", "filepond-plugin-image-exif-orientation": "^1.0.6", "filepond-plugin-image-preview": "^4.4.0", "formik": "^1.5.4", "history": "^4.9.0", "i18next": "^17.0.15", "i18next-browser-languagedetector": "^3.0.1", "lodash": "^4.17.11", "logrocket": "^1.0.3", "logrocket-react": "^3.0.1", "material-ui-flat-pagination": "^4.0.0", "material-ui-pickers": "^2.2.4", "moment": "^2.24.0", "node-sass": "^4.12.0", "query-string": "^6.5.0", "react": "^16.8.6", "react-adal": "^0.5.0", "react-app-polyfill": "^1.0.2", "react-autosuggest": "^9.4.3", "react-devtools": "^3.6.3", "react-dom": "^16.8.6", "react-filepond": "^7.0.1", "react-i18next": "^10.9.0", "react-places-autocomplete": "^7.2.1", "react-redux": "^7.1.0", "react-router": "^5.0.1", "react-router-dom": "^5.0.0", "react-scripts": "3.1.2", "react-snapshot": "^1.3.0", "react-svg": "^9.0.4", "react-swipeable-views": "^0.13.3", "react-use-localstorage": "^3.3.2", "recompose": "^0.30.0", "redux": "^4.0.4", "redux-persist": "^6.0.0", "redux-react-hook": "^3.3.2", "redux-thunk": "^2.3.0", "request-promise": "^4.2.4", "rxjs": "^6.5.3", "source-map-explorer": "^2.0.1", "typescript": "3.4.5", "underscore": "^1.9.1", "use-react-router": "^1.0.7", "whatwg-fetch": "^3.0.0", "yup": "^0.27.0" }, "scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "PORT=3001 react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "cypress": "cypress open" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all", "cover 99.5%" ], "development": [ "last 2 chrome version", "last 2 firefox version", "last 2 safari version" ] }, "devDependencies": { "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", "enzyme-to-json": "^3.3.5", "fakerator": "^0.3.0" }, "resolutions": { "minipass": "2.7.0" } }

[montydhanjal]

Upgrading to the latest version of react-scripts doesn't resolve this issue either.

[gustarus]

Looks like the problem not in create-react-app: I had the same error one minute ago inside docker build without react ecosystem.

[jsphstls]

Related:
https://github.com/svg/svgo/issues/1174

[kmudrick]

FWIW, Both css-tree and postcss pushed releases recently that are getting picked up by create-react-app now. Don't know if related.

[montydhanjal]

Related:
svg/svgo#1174

Thank you @jsphstls , This issue is being talked about here.
Temporary fix: https://github.com/svg/svgo/issues/1174#issuecomment-547643398

[wiredlain]

i have a same problem, and my problem was a bootstrap library, i recommend that remove some libraries and then run the build stage.

[chnirt]

i have a samem problem for my problec react built with webpack or not.

[KathrynN]

The solution that worked for me:
manually install the svgo dependency, either with npm
npm install [email protected] -E
or by popping the below into your package.json file as a dependency:
"svgo": "1.3.0",
Then reinstall all the node_modules:
rm -rf node_modules
npm i
This seems to force bootstrap (and it is react-bootstrap, not create-react-app) to use the working version.

note: I based this on an answer over here https://stackoverflow.com/questions/58616161/postcss-svgo-typeerror-cannot-set-property-multipasscount-of-undefined-gats

[Piotrovskyi]

The cause of this issue a new release of svgo with 1.3.1 version; So if you encountered this issue probably you don't use package-lock.json; Adding package-lock with 1.3.0 version of svgo fixed issue for me.

[CKGrafico]

Yes and also do that for yarn https://github.com/svg/svgo/issues/1174#issuecomment-547658450 @Piotrovskyi

[ivan-aksamentov]

Fixed in [email protected] (https://github.com/svg/svgo/pull/1176)

For yarn users, package.json:

  "devDependencies": {
    // ...
    "svgo": "1.3.2",
    // ...
  },
  "resolutions": {
    // ...
    "svgo": "1.3.2"
    // ...
  }