React App - Page unresponsive

26.6k views Asked by At

Page Unresponsive in Chrome

My React app was working perfectly fine. I did a yarn start and relaunched to continue working on the layout and got the above response. I researched the problem but can't seem to get clear directions whether this is a debugging issue with my chrome or react app. I did go into chrome extensions and enabled "Allow access to URLs" under React development tools. Did anyone face a similar problem or advice on what steps to take?

Thank you!

5

There are 5 answers

0
Archie Butler On

My app crashed because I created a component that didn't exist in html. After coding the <header> html component module successfully, I accidentally created an html element component called <hero> which doesn't exist in html. This crashed my React app with no clear error. Check your newly added html tags.

0
Mrunal Tupe On

In my case I was using same name of a component and a function. for example,

1 import { TableContainer, TableHead, TableCell, TableRow,} from '@mui/material';

2 const Table = () => {
3 return (
4  <TableContainer>
5   <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
6      <TableHead>
7        <TableRow>
8         <TableCell>Dessert (100g serving)</TableCell>
9         <TableCell align="right">Calories</TableCell>
10         <TableCell align="right">Fat&nbsp;(g)</TableCell>
11         <TableCell align="right">Carbs&nbsp;(g)</TableCell>
12         <TableCell align="right">Protein&nbsp;(g)</TableCell>
13       </TableRow>
14     </TableHead>
15    </Table>
16    </TableContainer>
 )
}

As you can see on line number 2 and 5 I have the same name. It was causing the error so I changed the name of the function.

2
Thor0o0 On

I know it's an old question but I just want to write what helped me in case somebody else is experiencing the same problem.

I had created an infinite loop and had basically nested the parent component in the parent component a couple of times instead of the child component, I initially wanted to nest. Corrected it and the app works just fine.

0
ISRAEL ODUGUWA On

You need to trace your code by looking at the last code you wrote before the error came up and delete that code, restart Your text editor, and terminal. I had the same issue the problem that caused it was adding a styling a Footer component in JSX. But the page loads when I delete the component

import React, { Component } from 'react'

export class Footer extends Component {
    render() {
        return (
            <Footer>
                Footer
            </Footer>
        )
    }
}

export default Footer;
0
Nivethan On

In my case i accidentally added z-index:-10 to the page and i can't click on any buttons or links, check if your page has any negative z-index values.