2

Suddenly, my entire build has collapsed and won't build. I reset the project several days ago with a fresh create-react app build, and it was fine for a bit, and then yesterday - similar problem with a different error:

Failed to compile.

TS2322: Type '{ children: Element; xsDown: true; }' is not assignable to type 'IntrinsicAttributes & HiddenProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & HiddenProps'.
    208 |                     {studentName(x)} <{x.student}>
    209 |                 </Box>
  > 210 |                 {!locked && <Hidden xsDown={true}><Box><RemoveButton deleteClickHandler={deleteClickHandler} x={x}/></Box></Hidden>}
        |                              ^^^^^^
    211 |                 {locked &&
    212 |                 <Box>
    213 |                     <Tooltip title="Locked"><Lock/></Tooltip>


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I've already stripped out some libraries I was using in small place that I suspected of causing conflicting types declarations, but, I'm still getting this problem, and at this point, I'm totally stuck.

Package.json isn't very complex:

  "name": "****Redacted****",
  "version": "1.2.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@fortawesome/fontawesome-common-types": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@material-table/core": "^4.3.39",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.3",
    "@sentry/react": "^6.19.6",
    "@sentry/tracing": "^6.19.6",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.26.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/dateformat": "^5.0.0",
    "@types/jest": "^27.0.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-router-dom": "^5.3.3",
    "amazon-cognito-identity-js": "^5.2.8",
    "amazon-cognito-identity-js-typescript": "^1.22.0",
    "axios": "^0.26.1",
    "dateformat": "^4.6.3",
    "immutability-helper": "^3.1.1",
    "react": "^18.0.0",
    "react-dnd": "^14.0.5",
    "react-dnd-html5-backend": "14.1.0",
    "react-dnd-touch-backend": "14.1.0",
    "react-dom": "^18.0.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "sass": "^1.49.11",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}
1
  • what is Hidden if its component show the code as well kindly. Commented Apr 9, 2022 at 17:44

1 Answer 1

5

I beleive this is because you've updated to React 18 (specifically, "@types/react": "^18.0.0",).

This pull request talks about what has changed.

Because the issue stems from Material Ui 4 component, most likely you'll need to do one of the following:

  1. upgrade to Mui5
  2. downgrade to React 17
  3. wait for this PR to be merged, that seems to alliviate the issue that you have.

(Also, <Hidden/> from MUI4 does implement children with children?: React.ReactNode; just like first link mentions)

Sign up to request clarification or add additional context in comments.

3 Comments

It's weird, because the version I have in Material-ui 4.12.4 doesn't have that. I will try to downgrade to react 17 here, maybe that'll help. I thought I tried that, but... maybe not properly
Now I get a different error telling me <Box> cannot be used as a JSX Component :/.
For me it was becasue materail-ui/[email protected] is pulling in @types/[email protected] which is in turn pullin in @types/[email protected] If you run npm ls @types/react you can see whats pulling it in.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.