Search code examples
javascriptreactjsecmascript-5

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls

Im getting the error TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls on my code. I have looked at this answer, this answer, this answer, this answer, this answer, and this answer.

I understand that

The 5th edition of ECMAScript (ES5) forbids use of arguments.callee() in strict mode. Avoid using arguments.callee() by either giving function expressions a name or use a function declaration where a function must call itself.

So my question is how do i modify my code to bypass the issue as I don't understand what by either giving function expressions a name or use a function declaration where a function must call itself means in terms of a practical solution....

My hook

export default (initialState, durationInMs = 200, options = {}) => {
  const [internalState, setInternalState] = useState(initialState);

  const debouncedSetter = useDebouncedCallback(
    setInternalState,
    durationInMs,
    options
  );

  return [internalState, debouncedSetter];
};

How I call it in my code

const [searchText, setSearchText] = useDebouncedState("null", 200, {
    maxWait: 1000,
});

Where the error is thrown

 <input
   onChange={(e) => setSearchText.callback(e.target.value)}
 />

useDebouncedCallback function

export interface CallOptions {
    leading?: boolean;
    trailing?: boolean;
}
export interface Options extends CallOptions {
    maxWait?: number;
}
export interface ControlFunctions {
    cancel: () => void;
    flush: () => void;
    pending: () => boolean;
}

export default function useDebouncedCallback<T extends (...args: any[]) => ReturnType<T>>(func: T, wait?: number, options?: Options): DebouncedState<T>;

The error as per the console enter image description here

Here is the trouble causing code as per the console

    var debounced = react_1.useCallback(function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        var time = Date.now();
        var isInvoking = shouldInvoke(time);
        lastArgs.current = args;
        lastThis.current = _this;
        lastCallTime.current = time;
        if (isInvoking) {
            if (!timerId.current && mounted.current) {
                // Reset any `maxWait` timer.
                lastInvokeTime.current = lastCallTime.current;
                // Start the timer for the trailing edge.
                startTimer(timerExpired, wait);
                // Invoke the leading edge.
                return leading ? invokeFunc(lastCallTime.current) : result.current;
            }
            if (maxing) {
                // Handle invocations in a tight loop.
                startTimer(timerExpired, wait);
                return invokeFunc(lastCallTime.current);
            }
        }
        if (!timerId.current) {
            startTimer(timerExpired, wait);
        }
        return result.current;
    }, [invokeFunc, leading, maxing, shouldInvoke, startTimer, timerExpired, wait]);
    var pending = react_1.useCallback(function () {
        return !!timerId.current;
    }, []);
    var debouncedState = react_1.useMemo(function () { return ({
        callback: debounced,
        cancel: cancel,
        flush: flush,
        pending: pending,
    }); }, [debounced, cancel, flush, pending]);
    return debouncedState;
}
exports.default =
Solution

  • The problem was there was outdated code on my prod server, so the code I was looking at was much newer. In the deployed code my usestate hook for setSearchText was missing the .callback, and firing off the wrong error in a way