Client-side exception when using "delay" on nextjs production builds

[blapid]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Web page does not load, instead I see the following error: Application error: a client-side exception has occurred (see the browser console for more information). Console shows the following error:

main-d8f5400635868254.js:1 TypeError: Cannot read properties of null (reading 'value')
    at t (58-48ffb31ca0bf7557.js:1:193476)
    at t (58-48ffb31ca0bf7557.js:1:193538)
    at t (58-48ffb31ca0bf7557.js:1:193538)
    at t (58-48ffb31ca0bf7557.js:1:193424)
    at t (58-48ffb31ca0bf7557.js:1:193538)
    at g (58-48ffb31ca0bf7557.js:1:193687)
    at 58-48ffb31ca0bf7557.js:6:215777
    at ak (framework-95e654c50294ba5f.js:9:60917)
    at ui (framework-95e654c50294ba5f.js:9:71228)
    at i (framework-95e654c50294ba5f.js:9:121560)

Expected Behavior

Animation would start with the specified delay

Steps To Reproduce

1. Clone Solito, use "with-expo-router" monorepo example
2. Change the following MotiLink element https://github.com/nandorojo/solito/blob/master/example-monorepos/with-expo-router/packages/app/features/home/screen.tsx#L62 and add a delay: 500 attribute
3. yarn next build && yarn next start Note that for some reason, yarn next dev does not exhibit this behavior.

From poking around, the issue stems from this line: https://github.com/software-mansion/react-native-reanimated/blob/65a31e473b4e9fa4bee83de01e807039f71b7666/src/reanimated2/hook/useAnimatedStyle.ts#L395 where prop is unexpectedly null. That prop is previousAnimation which seems to be set as null somewhere in this file https://github.com/software-mansion/react-native-reanimated/blob/1f2e4289ad9c869cd7fb7c7c23ffa4d14be59b29/src/reanimated2/animation/delay.ts but this is already far beyond my understanding...

Versions

- Moti: `moti@0.19.0-alpha.6`
- Reanimated: `react-native-reanimated@2.9.1`
- React Native: `react-native-web@0.18.7 react-native@0.69.5`

Screenshots

No response

Reproduction

Steps to reproduce provided above, still struggling with a Snack since it seems like all Moti Snacks are failing for unrelated reasons. Please let me know if this is a strict requirement.

[nandorojo]

You might need to disable SSR for this component.

[nandorojo]

This may be a reanimated issue. Unfortunately I don't think there's much I can do for it so I'm going to close.

[surajbhan]

@nandorojo I have given a fix for this issue as a pull request. Kindly consider the same. https://github.com/nandorojo/moti/pull/279

[nandorojo]

I don't think this is a solution that should be done on the moti side. It's better reproduced for reanimated in a minimal project for them to fix

[anderslemke]

You might need to disable SSR for this component.

Hi @nandorojo ,

My name is Anders, and WOW, I'm really amazed at what you've build here! Solito and Moti are really powerful tools! So, thank you from the bottom of my heart. 🙇

I ran into the same issue in my project, where adding a delay to a Moti-View doesn't work when running on Vercel. Everywhere else, it works as a charm. Local web, and all native platforms.

I've tried using useState and useEffect to ensure the component doesn't render on the server:

import { View } from "moti"
import { useEffect, useState } from "react"

export function Delay({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return mounted ? (
    <View
      delay={2000}
      from={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
      {children}
    </View>
  ) : null;
}

This still doesn't work, though.

So, was this what you meant with "disable SSR for this component"?

[karmatradeDev]

same happening to me after updating solito 3 and reanimated exact 3.0.2

[nandorojo]

can you guys open a PR there? check prop !== null

[nandorojo]

This issue does not belong on Moti, it belongs on Reanimated. Could you please copy the content and make an issue there? Thank you.