Closed spiftire closed 2 years ago
React.ReactNode
type alias does not have unknown
typescript type, so I think React is detecting it as multiple children, since unknown
can't be assignable to any other type (string
or number
or other types which React.ReactNode has) when embedding it to the children as expression.
You were able to pass variable
as test
of type string because anything can be assignable to unknown
but unknown
isn't assignable to anything but itself.
Why are you typing it as unknown
? You can have it strictly typed: https://codesandbox.io/s/solitary-currying-9m9u12?file=/src/Demo.tsx or use any
.
The following JSX has worked just fine untill upgrading to "react": "^18.1.0" and "@mui/material": "^5.6.3"
Can you provide a CodeSandbox with the previous versions where it was working before?
👋 Thanks for using MUI Core!
We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.
For support, please check out https://mui.com/getting-started/support/. Thanks!
If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
Why are you typing it as
unknown
? You can have it strictly typed: https://codesandbox.io/s/solitary-currying-9m9u12?file=/src/Demo.tsx or useany
.
The reason for using unknown
in this context is that the type of an error is unknown to typescript until checked.
I prefer not to use any
as it might bleed into other types if variables are combined.
Can you provide a CodeSandbox with the previous versions where it was working before?
This was working prior to upgrading
Duplicates
Latest version
Current behavior 😯
I'm using typescript. The following JSX has worked just fine untill upgrading to
"react": "^18.1.0"
and"@mui/material": "^5.6.3"
Throws the following error:
This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.
While the following does not throw any errors:
Expected behavior 🤔
I would expect
<Typography>An Error Occurred: ${error}</Typography>
to work as isSteps to reproduce 🕹
https://codesandbox.io/s/naughty-chatelet-iwt7ty?file=/src/Demo.tsx
Context 🔦
I would like to output the content of an
unknown
variable inside aTypography
componentYour environment 🌎
`npx @mui/envinfo`
``` System: OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa) (WSL) Binaries: Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node Yarn: 1.22.15 - ~/.yarn/bin/yarn npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm Browsers: Chrome: Used Firefox: Used npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.78 @mui/icons-material: ^5.2.5 => 5.6.2 @mui/lab: ^5.0.0-alpha.61 => 5.0.0-alpha.79 @mui/material: ^5.6.3 => 5.6.3 @mui/private-theming: 5.6.2 @mui/styled-engine: 5.6.1 @mui/styles: ^5.2.3 => 5.6.2 @mui/system: 5.6.3 @mui/types: 7.1.3 @mui/utils: 5.6.1 @mui/x-data-grid: ^5.7.0 => 5.10.0 @mui/x-date-pickers: 5.0.0-alpha.0 @types/react: ^18.0.8 => 18.0.8 react: ^18.1.0 => 18.1.0 react-dom: ^18.1.0 => 18.1.0 typescript: ^4.3.5 => 4.6.3 ```