react-scripts interaction with @craco/craco fails

[careignition-cps]

Describe the bug

I am using tailwindcss, which requires craco. To update to the newest versions, I need to update craco to 7.1.0, and react-scripts to 5.0.1. This breaks @babel/preset-react and @babel/preset-env - "Parsing error: Cannot find module '@babel/preset-env'".

Did you try recovering your dependencies?

When I return to react-scripts 4.0.1 and craco/craco 6.4.3, the error in compilation is gone, but I get the warning

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

(Write your answer here.)

Which terms did you search for in User Guide?

I have not searched the user guide, but I have scoured the internet. I have tried

• multiple times deleting all node modules and yarn installing them all again (multiple times)
• I have tried updating my devDependencies
• I have tried updating the browserlist
• I have tried updating my babel presets

(Write your answer here if relevant.)

Environment

package.json

{
  "name": "@minimal/material-kit-react",
  "author": "minimals.cc",
  "licence": "MIT",
  "version": "1.2.0",
  "private": false,
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
    "@craco/craco": "7.1.0",
    "@emotion/react": "^11.6.0",
    "@emotion/styled": "^11.6.0",
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.5",
    "@iconify/icons-ant-design": "^1.1.0",
    "@iconify/icons-eva": "^1.1.0",
    "@iconify/icons-ic": "^1.1.10",
    "@iconify/react": "^3.0.1",
    "@mui/icons-material": "5.2.0",
    "@mui/lab": "^5.0.0-alpha.47",
    "@mui/material": "^5.1.1",
    "@mui/styles": "^5.1.1",
    "@mui/utils": "^5.0.0",
    "@mui/x-data-grid": "^5.5.1",
    "@mui/x-data-grid-pro": "^5.5.1",
    "@react-native-community/cli-tools": "6.2.1",
    "@react-pdf/renderer": "^2.0.21",
    "@testing-library/jest-dom": "^5.14.1",
    "amazon-cognito-identity-js": "5.2.3",
    "apexcharts": "^3.32.0",
    "autosuggest-highlight": "^3.2.0",
    "aws-sdk": "^2.1354.0",
    "babel-loader": "^8.1.0",
    "change-case": "^4.1.2",
    "date-and-time": "^2.1.2",
    "date-fns": "^2.24.0",
    "dom-to-image": "^2.6.0",
    "faker": "^5.5.3",
    "formik": "^2.2.9",
    "framer-motion": "^4.1.17",
    "history": "^5.0.1",
    "html-to-image": "^1.9.0",
    "html2canvas": "^1.3.3",
    "lodash": "^4.17.21",
    "mapbox-gl": "^2.7.0",
    "node-html-to-image": "^3.2.4",
    "numeral": "^2.0.6",
    "prop-types": "^15.7.2",
    "qrcode.react": "^3.0.1",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^1.1.2",
    "react-icons": "^4.3.1",
    "react-idle-timer": "^4.6.4",
    "react-map-gl": "^7.0.9",
    "react-native": "^0.66.4",
    "react-router-dom": "^6.0.0-beta.4",
    "react-scripts": "5.0.1",
    "react-to-print": "^2.14.6",
    "recharts": "^2.1.6",
    "shell-quote": "1.8.1",
    "simplebar": "^5.3.5",
    "simplebar-react": "^2.3.5",
    "web-vitals": "^2.1.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.23.5",
    "@babel/preset-react": "^7.23.3",
    "autoprefixer": "^9.8.8",
    "postcss": "^7.0.39",
    "prettier": "^2.4.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },
  "resolutions": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. download my package.json
2. run yarn install
3. try to run yarn start on a project

Expected behavior

Not to have Errors.

(Write what you thought would happen.)

Actual behavior

ERRORS

(Write what happened. Please add screenshots!)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)