TypeError: u is not a function

[mryraghi]

Hi there,

I'm losing my mind over an issue that I've managed to track back to react-spring-bottom-sheet, but I haven't been able to solve yet, preventing the usage of this library, even if using demo code.

Framework: NextJS 12.1.2 react-spring-bottom-sheet version: 3.4.0 The issue is in production only using Vercel.

The stack trace is very poor, but that's all I have.

instrument.js:110 TypeError: u is not a function
    at _app-08db8fe46b3557c0.js:1:603078
    at _app-08db8fe46b3557c0.js:1:607445
    at Object.useMemo (framework-737ce2f1f8953932.js:1:65099)
    at a.useMemo (framework-737ce2f1f8953932.js:1:125050)
    at _app-08db8fe46b3557c0.js:1:607426
    at zg (framework-737ce2f1f8953932.js:1:59215)
    at Sg (framework-737ce2f1f8953932.js:1:67286)
    at $ (framework-737ce2f1f8953932.js:1:113610)
    at Ei (framework-737ce2f1f8953932.js:1:98685)
    at Ci (framework-737ce2f1f8953932.js:1:98613)
    at Bi (framework-737ce2f1f8953932.js:1:98476)
    at ui (framework-737ce2f1f8953932.js:1:95444)
    at framework-737ce2f1f8953932.js:1:45104
    at a.unstable_runWithPriority (framework-737ce2f1f8953932.js:1:129100)
    at pf (framework-737ce2f1f8953932.js:1:44878)
    at sf (framework-737ce2f1f8953932.js:1:45050)
    at rf (framework-737ce2f1f8953932.js:1:44985)
    at pi (framework-737ce2f1f8953932.js:1:92809)
    at Kg (framework-737ce2f1f8953932.js:1:64489)
    at authCheck (_app-08db8fe46b3557c0.js:1:403690)
    at main-31e654215812aa2c.js:1:33919
    at Array.map (<anonymous>)
    at Object.emit (main-31e654215812aa2c.js:1:33901)
    at a.<anonymous> (main-31e654215812aa2c.js:1:47767)
    at u (main-31e654215812aa2c.js:1:77399)
    at Generator._invoke (main-31e654215812aa2c.js:1:78689)
    at Generator.a.<computed> [as next] (main-31e654215812aa2c.js:1:77802)
    at b (main-31e654215812aa2c.js:1:70988)
    at e (main-31e654215812aa2c.js:1:71193)

I tried to debug and examine the stack trace and the call stack, but it's all garbage.

This is what's at _app-08db8fe46b3557c0.js:1:603078 and around it. As you can see it seems like it from this library as there's expandOnContentDrag a few characters before. ...te?X:te,ie=e.expandOnContentDrag,ae=void 0!==ie&&ie,ce=C(e,L),ue=(n=(e=(0,react.useState)(!1))[0],r=e[1],t=(0,react.useState)({}),i=t[0],u=t[1],s=(0,react.useCallback)(function(e){return u(function(n){var r;return x({},n,((r={})[e]=!1,r))}),function(){u(function(n){var r;return x({},n,((r={})[e]=!0,r))})}},[]),(0,react.useEffect)(function(){var e=Object.values(i);0!==e.length...

Does anyone have a clue?

Thanks a lot

[mryraghi]

After some more digging, I found out that the error is thrown in react-spring-bottom-sheet/src/hooks/useReady.tsx. The u in TypeError: u is not a function refers to updateReadyMap. Does somebody have any clue on how we can solve this? We've been using <ErrorBoundary> to isolate this problem that brought our site down for a few hours as this error wasn't thrown in local and wasn't spotted by tests.

[mryraghi]

Ok, after 3 days of smashing my head against any surface I could find, I finally understood that the issue is related to:

• package.json having "next": "^12.1.0", and "react-dom": "^17.0.2", (note the caret)
• NextJS released a few updates right before the issue started causing us problems (view more at this link: https://github.com/vercel/next.js/releases)

Hence, there is something in v12.1.1 or one of the more recent releases that cause this package not to work in production. The solution is to set "next": "12.1.0", and "react-dom": "17.0.2", in package.json.