useLocation will break on IE11 without Event polyfill

[christiaanwesterbeek]

This issue is just to note that useLocation will break on IE11 without a polyfill for window.Event. even when <meta http-equiv="x-ua-compatible" content="IE=edge"> is already in head.

IE9, 10 and 11 will break right here when new Event('pushstate'); is run by calling history.push('/something') in your react app.

react-use/src/useLocation.ts

Line 9 in bc3760d

const event = new Event(method.toLowerCase());

Object doesn't support this action

You need to polyfill window.Event which import '@babel/polyfill'; is not doing for you. So here goes what I've added to my polyfill.js

/**
 * To detect you are in IE (for this case) by checking typeof(Event) which is
 * 'function' for all except IE where it is 'object'.
 * You can then safely polyfill the Event constructor using the approach above.
 * In IE11 it seems to be safe to set window.Event = CustomEvent.
 */
(function() {
    if (typeof window.Event === 'function') return false; //If not IE

    function CustomEvent(event, params) {
        params = params || {
            bubbles: false,
            cancelable: false,
            detail: undefined,
        };
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(
            event,
            params.bubbles,
            params.cancelable,
            params.detail
        );
        return evt;
    }

    CustomEvent.prototype = window.Event.prototype;

    window.Event = CustomEvent;
})();

The solution was provided here (accepted answer). Don't skip the comments.
https://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work

[streamich]

Thanks, I've added a note to docs.

[claytonfbell]

So glad I found this. App is broken in ie11 without adding the Event polyfill @christiaanwesterbeek provided.

[cliedeman]

The polyfill note should be updated. Because of the patch method this breaks IE11 even if you are not using useLocation.

I worked around it by importing the hook I needed directly
import useDebounce from 'react-use/esm/useDebounce';

[macrozone]

happend to me as well, :-(

[PDKSophia]

Yes, I also encountered this problem

[einarq]

Shouldn't this be considered a side-effect? Just curious why bundlephobia reports that react-use is side-effect free.
https://bundlephobia.com/result?p=react-use@15.3.4