ReanimatedError: Property 'window' doesn't exist, js engine: reanimated

[wcandillon]

Description

After upgrading from 3.6 to 3.15, variables named window seem to be treated differently. In examples where I had a variable named window. I got the following error: ReanimatedError: Property 'window' doesn't exist, js engine: reanimated. I assumed this is because of the window variable on Web. Renaming this variable to something else (e.g win), fixes the issue immediately.

Steps to reproduce

Create an example that uses window as a variable name, e.g: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Vertices/Vertices.tsx#L25

Snack or a link to a repository

https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Vertices/Vertices.tsx#L25

Reanimated version

3.15

React Native version

0.75

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

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?

[MicroDroid]

Are you sure variables named window cause this error to show up? Because I don't have such a variable in my code base, and if it's from a library then woah it's going to be really weird trying to search for every variable ever defined in my zillion dependencies tree lol

[MicroDroid]

(I similarly upgraded from 3.6 to 3.15)

[tomekzaw]

Hey @wcandillon, thanks for opening the issue.

Heads-up: link in issue description is broken, here's a correct link: https://github.com/Shopify/react-native-skia/blob/963d1c35dc57e5c36e178fa66b878c75f1a17d6f/apps/paper/src/Examples/Vertices/Vertices.tsx#L25 (with win instead of window)

You're right, it looks like window was added to notCapturedIdentifiers array in Reanimated Babel Plugin (here) in https://github.com/software-mansion/react-native-reanimated/pull/6284.

So previously window would get captured into worklet closure like a regular variable but since 3.15.0 it is not captured (now it's treated analogously to global or globalThis).

However, in worklet runtime, window is not defined, hence the error Property 'window' doesn't exist.

cc @tjzel who's the author of the PR

[tjzel]

@tomekzaw Explained it well.

The closure capturing in worklets isn't smart. It doesn't use all semantic analysis available to it. In result it's not really feasible to discern if window refer to some local variable or if it refers to the global window object.

While this could be improved (and I hope in the future I will find some time for it) I strongly advise not to name variables window, same as you shouldn't name them global.

[oleksandr-dziuban]

Hello @tjzel

Do you know if it's possible to fix that issue? We just migrated to RN 0.75, it requires RN Reanimated 2.15+ But we always get this error:

We even removed all the window variables in codebase, but issues still exist...

Thanks in advance