React-hot-loader: Website content overlaps react-hot-loader-error-overlay

Created on 14 Mar 2019 · 11Comments · Source: gaearon/react-hot-loader

Description

Rendered react-hot-loader-error-overlay div element ⚛️🔥😭 is overlapped by existing content possibly because of absence of z-index css property.

Expected behavior

react-hot-loader-error-overlay div element has the most possible value of z-index property to overlap existing rendered page elements.

Actual behavior

Rendered react-hot-loader-error-overlay element is overlapped by existing content.

Environment

Mac OS X 10.14.3 (18D109)
Chrome 72.0.3626.121
[email protected]
[email protected]

└── [email protected]

Source

karolisgrinkevicius-home24

👍3

Most helpful comment

@karolisgrinkevicius-home24 - I will add z-index prop to the configuration
@mohsinulhaq - it was added to inform you about EVERYTHING IS BROKEN. UNABLE TO CONTINUE.
@mohsinulhaq - you may disable it via configuration, or just replace by your own implementation - https://github.com/gaearon/react-hot-loader#setting-global-error-reporter

theKashey on 24 Mar 2019

👍2

All 11 comments

I find the overlay very annoying personally. Not sure why it was added.

mohsinulhaq on 22 Mar 2019

@karolisgrinkevicius-home24 - I will add z-index prop to the configuration
@mohsinulhaq - it was added to inform you about EVERYTHING IS BROKEN. UNABLE TO CONTINUE.
@mohsinulhaq - you may disable it via configuration, or just replace by your own implementation - https://github.com/gaearon/react-hot-loader#setting-global-error-reporter

theKashey on 24 Mar 2019

👍2

@theKashey I understand, you helped me with that in one of my issues. https://github.com/gaearon/react-hot-loader/issues/1153#issuecomment-455334450

But it was quite an involved change than what I was expecting. I just wished it was turned off by default.

mohsinulhaq on 24 Mar 2019

There is a little problem with decision making and collecting user feedback. Basically - I am here a bit alone.
The idea behind error overlay is to reduce __cognitive dissonance__, when you did everything right, and there is no change in a browser, or a blank screen. You like a - _what a heck, table flip, I am out of here!_.
You are expected to notice a problem and update the code - then ErrorOverlay would automatically disappear. Works great with a dual monitor system, or just a single big one.

theKashey on 24 Mar 2019

👍1

I am actually using https://github.com/smooth-code/error-overlay-webpack-plugin for error overlays already and it handles hot reload errors quite gracefully, that's why I didn't find this overlay useful. Anyway, I get your point. 👍

mohsinulhaq on 26 Mar 2019

@theKashey can this also be incorporated in the next release?

mohsinulhaq on 3 Jul 2019

Next release took a place an hour ago, so no 😎

Could you be more concrete about what you actually want to be incorporated? I've lost a track a bit.

theKashey on 3 Jul 2019

Due to no z-index set, it gets overlapped by the other components in the app.
Although I have disabled the overlay, it still used to come on 4.12.0 on first page load, hence I noticed it again.
That issue is fixed in 4.12.1, but still it would be good to fix the z-index for others.

mohsinulhaq on 3 Jul 2019

Ok, so that's another bug - I am going to change conditions to display it, so it would not appear on page load.
Deal?

theKashey on 3 Jul 2019

no I mean that issue is fixed in 4.12.1, it just needs fix in the z-index

mohsinulhaq on 4 Jul 2019

😅Not intentionally.

theKashey on 4 Jul 2019

😄1

Was this page helpful?

0 / 5 - 0 ratings