Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useLocation will break on IE11 without Event polyfill #73

Closed
christiaanwesterbeek opened this issue Dec 5, 2018 · 3 comments

Comments

@christiaanwesterbeek
Copy link

@christiaanwesterbeek christiaanwesterbeek commented Dec 5, 2018

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.

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

This comment has been minimized.

Copy link
Owner

@streamich streamich commented Dec 5, 2018

Thanks, I've added a note to docs.

@streamich streamich closed this Mar 26, 2019
@claytonfbell

This comment has been minimized.

Copy link

@claytonfbell claytonfbell commented Apr 19, 2019

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

@cliedeman

This comment has been minimized.

Copy link

@cliedeman cliedeman commented Oct 10, 2019

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';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.