Accessing window properties inside useEffect leads to "Invalid calling object" error in IE 11

Hello,

I’ve noticed in two specific use cases that accessing window properties inside a useEffect leads to the error “Invalid calling object” in Internet Explorer 11.

I have not been able to isolate a minimum demo of the problem unfortunately.

First problem - window scroll useEffect(() => { window.scroll(0, 0); }, [])

Second problem - Apollo client polling useEffect(() => { startPolling(120000); return stopPolling; }, []); https://github.com/apollographql/apollo-client/blob/6f579ea2cdf8c78acb004a4457a7a6764d64091e/packages/apollo-client/src/scheduler/scheduler.ts The start polling method internally uses setInterval.

In both cases, replacing the useEffect by lifecycles removes the error.

React version: 16.7.0-alpha.2

[hipstersmoothie]

We are seeing the same issue. currently we will not be able to get a repro for a few weeks.

But i can confirm that the bug happens under these conditions:

1. Have a custom hook that uses window properties

import React from 'react';

/**
 * Determine if the user has "reduce-motion" enabled in their browser.
 *
 * @example
 * const isReducedMotion = useReduceMotion();
 */
export const useReduceMotion = () => {
  const [reduceMotion, setReduceMotion] = React.useState(
    window.matchMedia('(prefers-reduced-motion: reduce)').matches
  );

  // With either useEffect or useLayoutEffect this breaks. I can even comment
  // out the entire inside of the effect and the error happens.
  React.useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

    /** Ran when the user changes this setting. */
    const changeReduceMotion = () => setReduceMotion(!reduceMotion);

    mediaQuery.addListener(changeReduceMotion);

    return () => {
      mediaQuery.removeListener(changeReduceMotion);
    };
  }, [reduceMotion]);

  return reduceMotion;
};

1. Have devtool: 'eval-source-map' somewhere in a webpack build

2. Open IE

[gaearon]

Fair enough 🙂 If you do find a reduced case we’d appreciate sharing it.

All useEffect does is run the work a bit later, when the browser isn’t busy. It’s hard to guess which APIs don’t work in this case in IE or why.