Unable to build migrated CRA app

Hello!

I’ve migrated a CRA app, from 3.4.0 to 4.0.1 and now I can’t build my app, due to
Failed to load config "prettier" to extend from. error.

This error occurs ONLY in Netlify environment. I ran @netlify/build-image several times locally with my repo, and everything works. I’ve cleaned the Netlify cache - same story.

I didn’t file an issue to eslint or eslint-plugin-prettier because I can happily build my app locally. It stopped working (building) when I’ve migrated to a new CRA version.

Here’s latest deploy details: Netlify App

How could I resolve this error?

Thank you.

Hiya, sorry you are having trouble with your build.

This Support Guide contains a ton of useful debugging tips that can likely help you solve your problem :slight_smile:

We also recommend trying to search the forums with the build error you encountered - it’s likely your question was already asked by someone else!

If you are still having problems, please provide as much information as you can on what you have already tried, what your build settings are, your package.json, etc. Thanks!

I’ve explained what I had tried. My app can be built locally, whether it’s my own environment or yours (@netlify/build-image). It only fails to build during deploy.

Yes, I’ve read That Support Guide.

Here are my dependencies and devDependencies from package.json

"dependencies": {
    "@mapbox/mapbox-gl-draw": "^1.2.0",
    "@material/react-tab-indicator": "^0.15.0",
    "@reach/dialog": "^0.11.2",
    "@sentry/browser": "^5.29.2",
    "@turf/area": "^6.0.1",
    "@turf/center": "^6.0.1",
    "@turf/helpers": "^6.1.4",
    "@turf/length": "6.0.2",
    "@turf/point-on-feature": "^5.1.5",
    "@turf/points-within-polygon": "^5.1.5",
    "axios": "^0.21.1",
    "chance": "^1.1.7",
    "chart.js": "^2.9.4",
    "core-js": "^3.8.1",
    "downloadjs": "^1.4.7",
    "epsg": "^0.5.0",
    "eventemitter2": "^6.4.2",
    "exceljs": "^3.8.0",
    "file-saver": "^2.0.2",
    "firebase": "^8.0.0",
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.12.0",
    "formik": "^2.2.5",
    "fuse.js": "^6.4.3",
    "is-wsl": "^2.1.1",
    "jsonexport": "^3.0.1",
    "jszip": "^3.3.0",
    "keygenerator": "^1.0.4",
    "lodash": "^4.17.20",
    "mapbox-gl": "^1.12.0",
    "mapbox-gl-draw-circle": "^1.1.2",
    "moment": "^2.29.1",
    "polylabel": "1.1.0",
    "prop-types": "^15.7.2",
    "rc-color-picker": "^1.2.6",
    "rc-progress": "^3.1.1",
    "react": "^17.0.1",
    "react-beautiful-dnd": "^13.0.0",
    "react-chartjs-2": "^2.11.1",
    "react-datasheet": "^1.4.8",
    "react-dates": "^21.8.0",
    "react-dom": "^17.0.1",
    "react-loading-skeleton": "^2.1.1",
    "react-places-autocomplete": "^7.3.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-select": "^3.1.1",
    "react-spinkit": "^3.0.0",
    "react-table": "^7.6.0",
    "react-toastify": "^6.0.9",
    "redux": "^4.0.5",
    "redux-actions": "^2.2.1",
    "redux-thunk": "^2.2.0",
    "regenerator-runtime": "^0.13.7",
    "reproject": "^1.2.6",
    "stacktrace-js": "^2.0.2",
    "styled-components": "^5.2.1",
    "terraformer-wkt-parser": "^1.2.1",
    "tlds": "^1.214.0",
    "utm-latlng": "^1.0.6"
  }

"devDependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react-hooks": "^3.4.2",
    "@types/chance": "^1.1.0",
    "@types/chart.js": "^2.9.25",
    "@types/core-js": "^2.5.4",
    "@types/cypress-image-snapshot": "^3.1.2",
    "@types/downloadjs": "^1.4.2",
    "@types/eslint-plugin-prettier": "^3.1.0",
    "@types/file-saver": "^2.0.1",
    "@types/jest": "^26.0.19",
    "@types/lodash": "^4.14.165",
    "@types/mapbox-gl": "^1.12.5",
    "@types/polylabel": "1.0.5",
    "@types/prettier": "2.1.5",
    "@types/prop-types": "^15.7.3",
    "@types/react": "^16.9.56",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dates": "^21.8.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-places-autocomplete": "^7.2.6",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-select": "^3.0.22",
    "@types/react-spinkit": "^3.0.6",
    "@types/react-table": "^7.0.24",
    "@types/react-test-renderer": "^16.9.3",
    "@types/redux-actions": "^2.6.1",
    "@types/styled-components": "^5.1.3",
    "@types/testing-library__react-hooks": "^3.4.1",
    "@types/tlds": "^1.199.0",
    "babel-plugin-styled-components": "^1.12.0",
    "cypress": "^6.2.0",
    "cypress-file-upload": "^4.1.1",
    "cypress-firebase": "^1.5.0",
    "cypress-image-snapshot": "^3.1.1",
    "cypress-wait-until": "^1.7.1",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "firebase-tools": "^8.16.2",
    "jest-mock-axios": "^4.2.1",
    "jscodeshift": "^0.11.0",
    "minimist": "^1.2.5",
    "prettier": "2.2.1",
    "react-test-renderer": "^16.14.0",
    "start-server-and-test": "^1.11.6",
    "typescript": "^4.0.3"
  }

I have specified node version 12.14 in .nvmrc.

Do you want me to send you my eslint configuration file - .eslintrc?

Thanks.

Hey there,
I don’t see eslint in your dependencies, and your build log is complaining about it being missing:

9:43:42 AM: warning " > eslint-config-prettier@7.1.0" has unmet peer dependency "eslint@>=7.0.0".
9:43:42 AM: warning " > eslint-plugin-cypress@2.11.2" has unmet peer dependency "eslint@>= 3.2.1".
9:43:42 AM: warning " > eslint-plugin-prettier@3.3.0" has unmet peer dependency "eslint@>=5.0.0".

Could you please try adding that and seeing if it fixes things?

CRA uses its own eslint under the hood. Installing eslint directly is something that could break things.
Either way, I’ve tried that: installed some more missing packages and it still says

Failed to load config "prettier" to extend from.
Referenced from: /opt/build/repo/.eslintrc

Well, I feel like you are getting closer! Do you have your prettier config committed to git (some of our developers seem to .gitignore it sometimes).

My .prettierrc is commited to the repo

Hi, @ochmanski. Your build environment variables are suppressing the install of your devDependencies. This is covered in our documentation here:

You have the NODE_ENV environment variable set to “production”. This tells Node.js not to install devDependencies.

Important! -> This is how yarn and npm always work wherever you run them when you set this environment variable. This is not something Netlify specific.

To summarize, the error is caused because the required dependency is missing. There are two solutions, either:

  • stop setting NODE_ENV to “production”

or:

  • move the required dependencies to dependencies (instead of devDependencies)

​Please let us know if there are other questions about this.

Thank you all for all the answers!

We’ve decided to migrate to newer version of yarn (berry), it resolved our build issues.

1 Like