[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(() => {