[v3][Web] setImmediate is not defined

[nandorojo]

Description

This bug has appeared over the years many times. The solution has been to use requestAnimationFrame instead of setImmediate on Web.

The regression came from #3970

See: #2622 #152.

Steps to reproduce

Use Reanimated on Next.js.

Snack or a link to a repository

https://stackblitz.com/edit/nextjs-pxczpl?file=pages%2Findex.js,next.config.js,package.json

Reanimated version

3.0.0

React Native version

0.71

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[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?

[hdwatts]

Im encountering this as well on 3.0.1

[nandorojo]

there is indeed a reproduction.

[hdwatts]

I solved this by:

npm i setimmediate
and before importing react-native-reanimated:

import "setimmediate"
import "react-native-reanimated"

However I'd prefer not to have this shim necessary

[nandorojo]

yeah same

[wcandillon]

I can confirm that RN Skia is affected by this issue as well.

[edkimmel]

Finally found the same issue. Webpack was swallowing the exception during module initialization -_-.

setImmediate is being called when undefined in both a minimal VM environment on node for SSR and in the browser.

[deggertsen]

I have reproduced this as well. Not liking the workaround... Anyone have a patch in progress? Seems somewhat related to software-mansion/react-native-gesture-handler#2402

[deggertsen]

Looks like there is a PR here? #4189
I've been able to solve it short term with this patch.

diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/index.js b/node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/index.js
index 4f2ddfe..99cb340 100644
--- a/node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/index.js
+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/js-reanimated/index.js
@@ -1,9 +1,10 @@
 import JSReanimated from './JSReanimated';
+import { Platform } from 'react-native';
 const reanimatedJS = new JSReanimated();
 
 global._makeShareableClone = c => c;
 
-global._scheduleOnJS = setImmediate;
+global._scheduleOnJS = Platform.OS == 'web' ? requestAnimationFrame : setImmediate;
 export const _updatePropsJS = (updates, viewRef) => {
   if (viewRef._component) {
     const component = viewRef._component;
diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/mappers.js b/node_modules/react-native-reanimated/lib/module/reanimated2/mappers.js
index a0583c1..0d7f583 100644
--- a/node_modules/react-native-reanimated/lib/module/reanimated2/mappers.js
+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/mappers.js
@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { isJest } from './PlatformChecker';
 import { runOnUI } from './threads';
 const IS_JEST = isJest();
@@ -98,7 +99,8 @@ export function createMapperRegistry() {
       // if they want to make any assertions on the effects of animations being run.
       mapperRun();
     } else if (!runRequested) {
-      setImmediate(mapperRun);
+      const scheduleUpdate = Platform.OS == 'web' ? requestAnimationFrame : setImmediate;
+      scheduleUpdate(mapperRun);
       runRequested = true;
     }
   }
diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/threads.js b/node_modules/react-native-reanimated/lib/module/reanimated2/threads.js
index b6b81f0..bee6741 100644
--- a/node_modules/react-native-reanimated/lib/module/reanimated2/threads.js
+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/threads.js
@@ -1,4 +1,5 @@
 import NativeReanimatedModule from './NativeReanimated';
+import { Platform } from 'react-native';
 import { isJest, shouldBeUseWeb } from './PlatformChecker';
 import { makeShareableCloneOnUIRecursive, makeShareableCloneRecursive } from './shareables';
 const IS_JEST = isJest();
@@ -69,7 +70,8 @@ export function runOnUI(worklet) {
     _runOnUIQueue.push([worklet, args]);
 
     if (_runOnUIQueue.length === 1) {
-      setImmediate(() => {
+      const scheduleUpdate = Platform.OS == 'web' ? requestAnimationFrame : setImmediate;
+      scheduleUpdate(() => {
         const queue = _runOnUIQueue;
         _runOnUIQueue = [];
         NativeReanimatedModule.scheduleOnUI(makeShareableCloneRecursive(() => {

[kmagiera]

I opened that stackblitz link but it works alright for me, it looks like setImmediate gets somehow installed/polyfilled. What should I do to see that error?

I even tried downloading the project and starting it locally, but again, it all works fine

[nandorojo]

adding import ‘setimmediate’ (after installing it) appears to help

[kmagiera]

ok, I see it now. So the repro repository actually had setImmediate installed as dependency and imported in main project file hence it wasn't crashing. I remove that and now can see that error

[seyaobey-dev]

I'm still facing the same issue with latest reanimated 3.02 even with import setImmediate:
"react-native-reanimated": "^3.0.2",

[costaDZ]

Adding

import "setimmediate"

in App.tsx root file solve my problem

[sleaper]

Adding

import "setimmediate"

in App.tsx root file solve my problem

I had the same issue in React native. I had to put import 'setimmediate' in the top of index.js file.

But thanks @costaDZ, you saved me.

[piaskowyk]

3.3.0 version should resolve this problem.

[sleaper]

3.3.0 version should resolve this problem.

Then with 3.3.0 I get this error:
#4559 (comment)