ReferenceError: Property 'Proxy' doesn't exist, js engine: hermes [Mon Feb 08 2021 19:21:54.427] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication), js engine: hermes

[kaneki666]

when i import {View as MotiView} from 'moti';
i get this error only then.
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
"moti": "^0.4.1",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-bootsplash": "^3.1.3",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "2.0.0-rc.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1"

[nandorojo]

Please follow the installation instructions entirely.

If you have, then you must be facing an issue with Reanimated: software-mansion/react-native-reanimated#1439

I'm closing this since it's reanimated specific and not reproducible.

[kaneki666]

i followed the all instruction... i have installed reanimated 2 properly run a example and it works..can you make a example repo of moti so we can play around

[nandorojo]

Please make an empty expo project to try to reproduce it. I've tested this successfully on web and native with 2.0.0-rc.0.

There's also an examples folder on this repo.

This looks like a reanimated problem, but see if you can recreate it in an empty project.

[ghmeec]

am getting the same error, the app is created with react native cli and followed all the instruction for installing react native reanimated 2, it only breaks when i import {View,...} from 'moti'

environment
"moti": "^0.4.1",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-reanimated": "2.0.0-rc.0"

[nandorojo]

What happens if you try with Expo? It works fine on Expo for me, so it seems like a Reanimated issue.

[kaneki666]

it only gives me the error when I import moti components..I have run reanimated animation it works fine!
i don't use expo

[kaneki666]

am getting the same error, the app is created with react native cli and followed all the instruction for installing react native reanimated 2, it only breaks when i import {View,...} from 'moti'

environment
"moti": "^0.4.1",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-reanimated": "2.0.0-rc.0"

same dude

[nandorojo]

Without a reproducible example, I don't really know what I can do.

[nandorojo]

There are 2 examples in the /examples folder if you want to try running them.

https://github.com/nandorojo/moti/tree/master/examples

[kaneki666]

There are 2 examples in the /examples folder if you want to try running them.

https://github.com/nandorojo/moti/tree/master/examples
With expo yes its working fine. Love the library nice and simple.

if you get time can u make a example with react native cli so we can use this library in production apps.. I tried two new app same error

[nandorojo]

Can you upload those examples to a reproducible GitHub repo?

[nandorojo]

@cmaycumber have you used a react native CLI example in a monorepo before? I wonder if the setup would be similar to the expo one.

[kaneki666]

Can you upload those examples to a reproducible GitHub repo?

here is the repo .. i Have installed moti in the reanimated playground repo
https://github.com/kaneki666/moti_demo

[nandorojo]

Is this on android?

[kaneki666]

Is this on android?

yes pixel 2!

[nandorojo]

Got it, could you try running this repo's examples on android and see what happens? I haven't tested on android.

[kaneki666]

Got it, could you try running this repo's examples on android and see what happens? I haven't tested on android.

Yes i have tested reanimated example they work fine!

[nandorojo]

Can you try moti's example?

Just clone this repo, run yarn install, cd examples/with-expo, yarn install && yarn android

[kaneki666]

oh your expo example works fine i had cloned it and run it..it works

[cmaycumber]

@cmaycumber have you used a react native CLI example in a monorepo before? I wonder if the setup would be similar to the expo one.

Not specifically. I have set up a monorepo outside of the expo managed workflow in the past and it was more difficult to get working. Most of the issues I ran into was related to the file paths that are default for a react-native project.

[ghmeec]

What happens if you try with Expo? It works fine on Expo for me, so it seems like a Reanimated issue.

it works fine with expo

[nandorojo]

What happens if you try with Expo? It works fine on Expo for me, so it seems like a Reanimated issue.

it works fine with expo

I can try to make a react native CLI project when I have time, but if someone else could try debugging by commenting out different parts of the code until it works that would be useful. I don't use react native CLI.

Just look in @motify/core/src/use-map-props-to-style.ts, and try commenting code out inside of useAnimatedStyle and see what happens until it works.

[kaneki666]

there is no file named that..there is use-map-animate-to-style.ts

[nandorojo]

Oh sorry typo, that's what I meant.

[kaneki666]

ok i will try what u asked
u meant style variable right 240 line!

[nandorojo]

That's right! I would try commenting out everything inside of it (but still return an object), and putting console logs throughout, until you can find the line that breaks it.

[kaneki666]

got a new kind of error..i tried to run Animated Presence error...and i have returned only obj still same error..might be some other library causing it

ReferenceError: Property 'Proxy' doesn't exist, js engine: hermes
(node:7216) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 change listeners added to [HasteMap]. Use emitter.setMaxListeners() to increase limit
[Tue Feb 09 2021 21:57:32.479] ERROR Error: Requiring module "node_modules\framer-motion\dist\framer-motion.cjs.js", which threw an exception: ReferenceError: Property 'Proxy' doesn't exist, js engine: hermes

[nandorojo]

This all looks like it's related to Hermès/reanimated

[kaneki666]

Any update? did you try it on bare rn cli?
just watching this haha
https://www.youtube.com/watch?v=dxWrRuHbh6E

[nandorojo]

It would appear that Framer Motion uses Proxy, and Moti imports framer-motion. Hermes doesn't support Proxy, so we need a way around that.

I might have to disable AnimatePresence on Android if there is no polyfill for Hermes.

I wrote more here: software-mansion/react-native-reanimated#1711

[nandorojo]

I'm not using Hermes yet so I can't test this, and I don't have an Android.

Could you guys please try importing this library's polyfill at the root of your app before importing Moti and see if it fixes it?

https://github.com/GoogleChrome/proxy-polyfill

[kaneki666]

I'm not using Hermes yet so I can't test this, and I don't have an Android.

Could you guys please try importing this library's polyfill at the root of your app before importing Moti and see if it fixes it?

https://github.com/GoogleChrome/proxy-polyfill

Ok it's midnight here i will try it out tomorrow and let you know...just have to import this index.js right? Or wrap it like Navigation Container?

[nandorojo]

I would think so, yes.

[redwanul10]

got a new kind of error..i tried to run Animated Presence error...and i have returned only obj still same error..might be some other library causing it

ReferenceError: Property 'Proxy' doesn't exist, js engine: hermes
(node:7216) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 change listeners added to [HasteMap]. Use emitter.setMaxListeners() to increase limit
[Tue Feb 09 2021 21:57:32.479] ERROR Error: Requiring module "node_modules\framer-motion\dist\framer-motion.cjs.js", which threw an exception: ReferenceError: Property 'Proxy' doesn't exist, js engine: hermes

i am also facing the same error for last 2 days in react native cli!

[nandorojo]

Can you try the solution I proposed then?

#13 (comment)

[kylegillen]

Can you try the solution I proposed then?

#13 (comment)

I tried it. Doesn't work.

[nandorojo]

Hmm okay, good to know.

I propose this:

1. do some googling to see if you can find a way to polyfill Proxy in a Hermès app.
2. Try using those and let me know.

If there's no luck, I'll have to disable the AnimatedPresence feature for apps using Hermès.

[nandorojo]

Here is a conversation about Proxy in Hermès: facebook/hermes#33

Please read through and see if you can try anything that might solve this. Thanks!

[nandorojo]

Possible solution: upgrade to RN 64 and Hermès v0.7: facebook/hermes#33 (comment)

More info: facebook/hermes#33 (comment)

Or, try npm install hermes-engine@v0.5.2-rc1 if you're using react native 63.x

The Hermès repo has what appears to be solutions. Unfortunately I don't have an android so I can't test this out.

I would really appreciate if everyone who has commented would help investigate and trying the solutions above so we can get to the bottom of it. Thanks!

Update, here is a relevant release for a potential fix where Hermes adds support for Proxy: https://github.com/facebook/hermes/releases/tag/v0.5.2-rc1

[kylegillen]

Possible solution: upgrade to RN 64 and Hermès v0.7: facebook/hermes#33 (comment)

More info: facebook/hermes#33 (comment)

Or, try npm install hermes-engine@v0.5.2-rc1 if you're using react native 63.x

The Hermès repo has what appears to be solutions. Unfortunately I don't have an android so I can't test this out.

I would really appreciate if everyone who has commented would help investigate and trying the solutions above so we can get to the bottom of it. Thanks!

Update, here is a relevant release for a potential fix where Hermes adds support for Proxy: https://github.com/facebook/hermes/releases/tag/v0.5.2-rc1

install hermes-engine@v0.5.2-rc1 if you're using react native 63.x

^^That did the trick for me. Thanks for the speedy workaround @nandorojo :)

[nandorojo]

Awesome! I'll add it to the docs and then close this.

[nandorojo]

Solution added to docs: https://moti-5qbvkhyh8.vercel.app/installation#hermesandroid-support