Issue
I have a build pipeline in Azure DevOps that I am attempting to build a front end React Typescript application with. This application uses Material ui and the issue seems to be with the code for that library. I have built this project before, but for some reason, now when I run the build, I am getting this error code:
'Box' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<BoxProps, any, any> | null' is not a valid JSX element.
Type 'Component<BoxProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<BoxProps, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/vsts/work/1/s/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'. TS2786
68 | <React.Fragment>
69 | <div>
> 70 | <Box component="nav" className={classes.Nav}>
| ^
71 | <AppBar position="relative" className={classes.appBarStyles}>
72 | <Toolbar className={classes.toolbarStyles}>
73 | <div className={classes.toggleSlider}>
Here is the code for the navbar:
return (
<React.Fragment>
<div>
<Box component="nav" className={classes.Nav}>
<AppBar position="relative" className={classes.appBarStyles}>
<Toolbar className={classes.toolbarStyles}>
.....
</Toolbar>
</AppBar>
</Box>
</div>
</React.Fragment>
);
I have upgraded the versions of materialui, react and react-dom, as well as typescript types; I have tried enclosing the Box element with a div and I have tried using the typescript ignore flag, but none of it seemed to have solved the issue.
I have been able to build this project before, so I am not so sure where the error is coming from. Any help is appreciated, thanks.
Solution
Upgrading to React 18 seems to have solved the issue. I discovered that solution here: Some components "cannot be used as a JSX component"
Answered By - AppSupportGuru1995
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.