0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a very
0:04
easy fix how you can actually hide or
0:07
disable the React errors overlay
0:11
messages that occurs while you inside
0:13
your development mode so this is a
0:15
simple ReactJS application I'm running
0:17
right here and if I just run this
0:21
application you will see this red
0:25
come you can see in the background the
0:27
app is perfectly working but this
0:29
uncaught runtime error is showing right
0:34
overlay so it is sometimes it is really
0:37
annoying to see this error messages this
0:39
overlay messages so I will show you in
0:41
this video how to completely disable
0:43
this so to smoothly enjoy development
0:46
experience so the easy fix is that if
0:49
you just right click inspect element and
0:53
you will actually go into the elements
0:55
right here and we need to see which
0:58
element is creating this problem so here
1:01
see this is actually the ID of this
1:05
element here of the overlay webpack dev
1:09
server client overlay
1:11
div so this is actually the element that
1:14
we need to hide in the CSS simply you
1:17
need to go into this and select right
1:24
copy so you'll target this element and
1:27
now what we need to do we need to go to
1:29
the CSS file of your project this is a
1:33
very simple ReactJS project if you see
1:36
we have a basic structure here so here
1:38
you will go to your global CSS file
1:40
index dot CSS and right here you need to
1:44
target this hash symbol because it's an
1:51
this and here we need to hide this so
1:54
you will change the display property and
1:57
I will set this to none
2:00
and just make sure that you add this
2:02
important attribute as
2:09
this because this will override the
2:11
default styling so this important is
2:14
really important here we need to add
2:15
this keyword after you display none and
2:19
then important and also we also need
2:25
to one more style we need to say
2:35
overlay and just repeat the same thing
2:38
but this time the div is not there just
2:40
the overlay and same disable and
2:43
important so just you need to write
2:44
these two lines inside your CSS and now
2:48
if you try to run your application you
2:51
will see the application will run
2:53
perfectly all those error red overlay
2:56
messages will go away if I
2:59
select so now you will see those error
3:02
messages will not come you can see that
3:09
working so those error messages are not
3:12
coming so this is the easy way you can
3:14
fix this red error overlay messages it's
3:17
very easy to hide and disable this so
3:21
hopefully this will fix your problem and
3:23
if you fixed it then please hit that
3:25
like button subscribe the channel and
3:27
also comment on this video if you fix
3:29
this problem or not and also check out
3:34
freemediatools.com which contains
3:36
thousands of tools regarding audio video
3:39
and image and I will be seeing you in