DevOps Typescript Build Issue with Material Ui Box Element

Question

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.

score 1 · Accepted Answer · answered May 23 '22 at 15:53

1

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 May 23 '22 at 15:53

AppSupportGuru1995

59
5

antokhio · Answer 2 · 2022-05-20T19:57:33.263

0

Hi as it states here https://www.w3schools.com/tags/tag_nav.asp nav should hold collection of a tags, guess the problem is component=“nav” since it expects “a tag” to be the child of nav prolly that throws type error.

With Mui I think appbar is already a correct html header component

edited May 20 '22 at 19:57

answered May 20 '22 at 19:40

antokhio

1,497
2
11
16

Thank you, yes, I removed the Box component altogether and it worked as expected. However, now I have an entirely different component that is giving me this same error from the library "React Loading" The error says: 'ReactLoading' cannot be used as a JSX component. Its instance type 'Loading' is not a valid JSX element. It seems to be giving this error for any custom React library element. I am not sure why it is doing that. – AppSupportGuru1995 May 23 '22 at 15:25
Okay, I found this other response here, and upgrading React to 18 seems to have solved the issue. https://stackoverflow.com/questions/71841181/some-components-cannot-be-used-as-a-jsx-component – AppSupportGuru1995 May 23 '22 at 15:52

score 0 · Answer 3 · edited Nov 01 '22 at 16:43

0

add the component prop inside the box component to solve the typescript error in the mui box. For the component prop, give the input as div or span

    <Box component="div">
       ----
       --
    </Box>

edited Nov 01 '22 at 16:43

Meet Bhalodiya

630
7
25

answered Oct 27 '22 at 05:06

JULURI SAICHANDU

1
1

DevOps Typescript Build Issue with Material Ui Box Element

3 Answers3