Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

278
Views
DevOps Typescript Build Issue with Material Ui Box Element

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.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Upgrading to React 18 seems to have solved the issue. I discovered that solution here: Some components "cannot be used as a JSX component"

about 4 years ago · Juan Pablo Isaza Report

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!