[Web]ReferenceError: _frameTimestamp is not defined

[alantoa]

Description

Get this error when upgrading react-native-reanimated to v2.9.0+ on the web (v2.8.0 works), it works fine on iOS and Android.

Expected behavior

Works on the web.

Actual behavior & steps to reproduce

web not working when upgrading to v2.9.0+.

Snack or minimal code example

https://github.com/tamagui/starters/tree/main/next-expo-solito

Package versions

name	version
react-native	0.68.2
react-native-reanimated	2.9.1
NodeJS	16.15.1
Xcode	13.4.1
Java
Gradle
expo	45.0.2

Affected platforms

• Android
• iOS
• Web

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

[zzph]

I'm also facing this issue, on 2.9.1 on web.

For example, in this repo (not minimal): https://github.com/tamagui/starters/tree/main/next-expo-solito

Has anyone found a solution?

[tpisto]

Same problem with simple react-native-web project with library v2.9.1 and react-native v0.69.1. Error is in "styleUpdater" function:

---

Seems quick workaround is to add window._frameTimestamp = null on top of the component file =)

[mikevocalz]

which file to be exact?

[mo-fouad]

had the same issue with V2.9 and had to downgrade to 2.8.

[WillenOLeal]

Having the same issue while using Next.js any updates on this?

[piaskowyk]

@WillenOLeal I fixed it, but this hasn't been released yet. I want to release the new version this week.

[azimgd]

Hey @piaskowyk. Can we get new version released please ?

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[vbylen]

Hmm I'm on 3.0.0-rc.1 and still getting the _frameTimestamp is not defined error on web.

[ChronSyn]

I've been experiencing this recently too. My use-case was with Moti (on Expo SDK46) presence animation. Version 2.8.0 and 2.9.x versions were all experiencing this issue.

I've found that this issue seems to only happen in the built bundle, and not when running local dev (e.g. via expo start --web). The correct transpilation process is setup for moti and reanimated.

(Sorry for cross-promoting, but switching to https://legendapp.com/dev/motion/animate-presence/ on web solves my specific issue - might be useful for others, though this doesn't have the performance benefits of reanimated)

[dohomi]

I bumped into the issue as well on the latest 3.0.0-rc2. Is there a temporary solution for it?

[tpisto]

I bumped into the issue as well on the latest 3.0.0-rc2. Is there a temporary solution for it?

Add window._frameTimestamp = null on top of the component file

[jesse-savary]

I bumped into the issue as well on the latest 3.0.0-rc2. Is there a temporary solution for it?

Stick the following at the top of _app.tsx, outside the component definition:

// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
if (process.browser) {
  // @ts-ignore
  window._frameTimestamp = null
}

[sunnylqm]

still not fixed on 2.11.0

[crutch12]

Bump

[bombillazo]

Bump

[JamesHemery]

Today on 2.12.0 with #3418 merged the problem is still present after building the application with Expo.

Temp fix of @jesse-savary works:

I bumped into the issue as well on the latest 3.0.0-rc2. Is there a temporary solution for it?

Stick the following at the top of _app.tsx, outside the component definition:

// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
if (process.browser) {
  // @ts-ignore
  window._frameTimestamp = null
}

[Ryanjso]

We're still having this issue

[pencilcheck]

Still having this issue, looks like it went away after upgrading to 3.x.x

[prateem]

Today on 2.12.0 with #3418 merged the problem is still present after building the application with Expo.

Temp fix of @jesse-savary works:

I bumped into the issue as well on the latest 3.0.0-rc2. Is there a temporary solution for it?

Stick the following at the top of _app.tsx, outside the component definition:

// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
if (process.browser) {
  // @ts-ignore
  window._frameTimestamp = null
}

I get error process is not defined, am I missing something?

[Ryanjso]

Today on 2.12.0 with #3418 merged the problem is still present after building the application with Expo.
Temp fix of @jesse-savary works:

I bumped into the issue as well on the latest 3.0.0-rc2. Is there a temporary solution for it?

Stick the following at the top of _app.tsx, outside the component definition:

// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
if (process.browser) {
  // @ts-ignore
  window._frameTimestamp = null
}

I get error process is not defined, am I missing something?

You need to let TS know that process exists. Create a file named global.d.ts and add the following to it:

declare namespace NodeJS {
    interface Process {
        browser: boolean
    }
}

[prateem]

You need to let TS know that process exists. Create a file named global.d.ts and add the following to it:

declare namespace NodeJS {
    interface Process {
        browser: boolean
    }
}

Thanks for the quick reply! I've tried this and I still get this error in the console:

Uncaught ReferenceError: process is not defined
    at ./App.tsx (App.tsx:9:1)
    at __webpack_require__ (bootstrap:24:1)

for environment context I am using expo if that makes a difference

[jgo80]

@prateem use this instead:

if (typeof window !== 'undefined') {
  window._frameTimestamp = null;
}

[GiladR1979]

What solved this for me is this, after tearing a few hairs for half a day:
npm start -- --reset-cache
or if you use yarn:
yarn cache clean

[Pramela-Devi-S]

Clean your cache use this command in your project directory->npx react-native clean cache. It should work
✔ Select all caches to clean › metro (Metro, haste-map caches), watchman (Stop Watchman and delete its cache)
✔ Clean Metro cache
✔ Clean Haste cache
✔ Clean React Native cache
✔ Stop Watchman
✔ Delete Watchman cache

[mehdiChibani]

What solved this for me is this, after tearing a few hairs for half a day: npm start -- --reset-cache or if you use yarn: yarn cache clean

me too :)