ReferenceError: Property 'Proxy' doesn't exist, js engine: hermes

[kaneki666]

Description

i was trying to play with moti.. when i import moti the app gives me this error.It only gives me this error when i use moti....i had opened issue there he said its related to reanimted.

Steps To Reproduce

import React, { useReducer } from 'react'
import { StyleSheet, Pressable } from 'react-native'
import { View } from 'moti'

function Shape() {
  return (
    <View
      from={{
        opacity: 0,
        scale: 0.5,
      }}
      animate={{
        opacity: 1,
        scale: 1,
      }}
      transition={{
        type: 'timing',
      }}
      style={styles.shape}
    />
  )
}

export default function HelloWorld() {
  const [visible, toggle] = useReducer((s) => !s, true)

  return (
    <Pressable onPress={toggle} style={styles.container}>
      {visible && <Shape />}
    </Pressable>
  )
}

const styles = StyleSheet.create({
  shape: {
    justifyContent: 'center',
    height: 250,
    width: 250,
    borderRadius: 25,
    marginRight: 10,
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: '#9c1aff',
  },
})

Package versions

"@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"

[github-actions]

Issue validator

The issue is invalid!

• Section required but not found: description(for label 🐞 bug)
• Section required but not found: steps to reproduce(for label 🐞 bug)
• Section required but not found: expected behavior(for label 🐞 bug)
• Section required but not found: actual behavior(for label 🐞 bug)
• Section required but not found: package versions(for label 🐞 bug)

[jakub-gonet]

This is likely coming from one of your dependencies – Hermes doesn't support Proxy and probably one of the libraries utilizes it. If you manage to reproduce this with Reanimated only (without any other dependencies), please update your reproduction example and ping me.

[kaneki666]

This is likely coming from one of your dependencies – Hermes doesn't support Proxy and probably one of the libraries utilizes it. If you manage to reproduce this with Reanimated only (without any other dependencies), please update your reproduction example and ping me.

No brother i dont think its issue with reanimated i told the moti author he said its other libary tho it only comes when i import anything from moti! so its that library big right! it works fine in expo btw!
i will close it anyway!
I had cloned the reanimated playground repo as moti supoorts reanimated lower i downgraded to that.. it breaks only when i import anything from moti..works fine without it.. i opened a issue in his repo he closed it saying reanimated or other repo issue
https://github.com/nandorojo/moti/issues/13#issuecomment-777428344`

 import React, {useEffect} from 'react';
 import {StatusBar, View} from 'react-native';
 import {View as MotiView} from 'moti';
 const App = () => {
 return (
<View>
  <MotiView
    from={{opacity: 0}}
    animate={{opacity: 1}}
    transition={{type: 'timing'}}
  />
</View>
 );
  };
export default App;

Dependencey
"dependencies": {
"expo-asset": "^8.2.0",
"moti": "^0.4.1",
"react": "16.13.1",
"react-dom": "^16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "2.0.0-rc.0",
"react-native-web": "^0.14.7"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/runtime": "^7.10.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.1.0",
"eslint": "^7.5.0",
"jest": "^26.1.0",
"metro-react-native-babel-preset": "^0.60.0",
"react-test-renderer": "16.13.1"
},

[nandorojo]

Hey, creator of Moti here. It would appear that Framer Motion uses Proxy, and Moti imports framer-motion.

@jakub-gonet is there a polyfill or any alternative that you know of, or should I just hide this feature on Android devices?

[jakub-gonet]

You can try using https://github.com/GoogleChrome/proxy-polyfill – I didn't test that though.

should I just hide this feature on Android devices?

Proxy is only supported in JSC and Hermes support is coming to iOS devices in RN 64 so iOS devices will have this problem as well.

You can try checking if Hermes is used by utilizing this function:

const isHermes = () => !!global.HermesInternal;

and failing in runtime.

[nandorojo]

Got it, thanks so much!

[nandorojo]

Turns out the solution is

npm install [email protected]

Or, upgrade to RN 0.64.x and Hermès 0.7.

Hermès v0.5.2-rc1, which targets RN 0.63, enables Proxy by default. Same goes for 0.7 on 64.

[jakub-gonet]

Huh, wasn't aware that Proxy support landed. Good to know, thanks!

[nandorojo]

For future reference:

Related release: https://github.com/facebook/hermes/releases/tag/v0.5.2-rc1
Issue: facebook/hermes#33