useWindowSize hook triggers failure in unit test

[rjray]

What is the current behavior?

A component that uses useWindowSize works fine in the browser, but fails its basic unit-tests.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

(Code is company-proprietary.)

What is the expected behavior?

Unit test should have no problem with the hook.

A little about versions:

• OS: Ubuntu Linux 24.04
• Browser (vendor and version): N/A
• React: 18.3.1
• react-use: 17.6.0
• Did this worked in the previous package version? First time using this package

This is the error message received:

TypeError: Cannot read properties of null (reading 'useRef')

  51 |
  52 | export default function HomePage() {
> 53 |   const { height } = useWindowSize({ initialWidth: 1280, initialHeight: 1024 });
     | 

  at Object.useRef (node_modules/react/cjs/react.development.js:1630:21)
  at Object.useRafState [as default] (node_modules/react-use/lib/useRafState.js:7:25)
  at useWindowSize (node_modules/react-use/lib/useWindowSize.js:10:35)
  at HomePage (src/app/baremetal/page.tsx:53:35)
  at Object.<anonymous> (__tests__/app/baremetal/page.test.tsx:25:18)

It appears that the import of react in node_modules/react-use/lib/useRafState.js is returning null. This is the content of that file:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var useUnmount_1 = tslib_1.__importDefault(require("./useUnmount"));
var useRafState = function (initialState) {
    var frame = react_1.useRef(0);
    var _a = react_1.useState(initialState), state = _a[0], setState = _a[1];
    var setRafState = react_1.useCallback(function (value) {
        cancelAnimationFrame(frame.current);
        frame.current = requestAnimationFrame(function () {
            setState(value);
        });
    }, []);
    useUnmount_1.default(function () {
        cancelAnimationFrame(frame.current);
    });
    return [state, setRafState];
};
exports.default = useRafState;

[rjray]

I tried replacing this package entirely, and got the same error. I also got the following message:

  console.error
    Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I had gotten this particular error with this package's useWindowSize hook, but I thought I had solved it by passing default window-size values in. Given that this project has only version of React, only one installation of React, and this hook is definitely being called within a function component, I have no idea what the underlying cause is.