Problem Using Back4App/Parse with React Native (Expo)

Question

I'm trying out Back4App with React Native Expo and I keep getting a TypeError associated with the Parse.initialize statement. If I comment this statement, the app loads well in the simulator, but once the statement is uncommented, the error is thrown.

" ERROR TypeError: attempted to use private field on non-instance, js engine: hermes "

My App.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView, Button, TextInput } from 'react-native';
import { useState } from 'react';
import Parse from 'parse/react-native.js';
import AsyncStorage from '@react-native-async-storage/async-storage';

Parse.setAsyncStorage(AsyncStorage);
Parse.serverURL = 'https://parseapi.back4app.com/';
Parse.initialize("xxxxxxxxxx","xxxxxxxxx");



export default function App() {
  const [todoTitle, setTodoTitle] = useState("");
  return (
    <SafeAreaView>
      <StatusBar style="auto" />
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>My Todo List</Text>
          <Text style={styles.descriptionText}>List of activities I need to accomplish</Text>
        </View>
        <View style={styles.formContainer}>
          <TextInput placeholder="Add a new todo" onChangeText={setTodoTitle} style={styles.input} />
          <Button title="Add" />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    
    backgroundColor: '#fff',
    marginTop: StatusBar.height
  },
  header: {
    height: 200,
    backgroundColor: "blue",
    justifyContent: "center",
    alignItems: "center",
    padding: 15,
  },
  headerText: {
    color: "white",
    fontSize: 30,
    marginBottom: 10,
    fontWeight: "bold",
  },
  descriptionText: {
    color: "white",
    fontSize: 20,
  },
  formContainer: {
    backgroundColor: "lightblue",
    padding: 20,
  },
  formText: {
    fontWeight: "bold",
    fontSize: 15,
  },
  input: {
    backgroundColor: "white",
    padding: 10,
    marginBottom: 10,
    borderRadius: 5,
    borderWidth: 1,
    borderColor: "lightblue",
  }
});

Any help will be highly appreciated.

I tried to redo the app in snack.expo.dev but kept getting the error that "the module parse/react-native.js cannot be resolved". Just wanted to see if my dev setup was causing the problem.

Answer 1

I got the same error with Expo sdk v50, and I have solved by the following solution.

1. As for your_project_folder/node_mosules/parse/lib/react-native/EventEmitter.js, replace all codes with the followings(same code as parse/lib/node/EventEmitter.js)

-before:

var EventEmitter;
try {
  EventEmitter = require('react- 
  native/Libraries/vendor/emitter/EventEmitter');
  if (EventEmitter.default) {
    EventEmitter = EventEmitter.default;
  }
  EventEmitter.prototype.on = EventEmitter.prototype.addListener;
} catch (_) {}
module.exports = EventEmitter;

-after:

module.exports = require('events').EventEmitter;
var EventEmitter;

2. npm install(or yarn add) events This "events" module is for Node.js, so is not pre-installed in react-native, but actually run on react-native.

3. npx expo start -c

I hope this will be working for you and other Expo users.

Answer 2

Downgrade Parse version to 4.2.0 works for me. Seems like this new feature in version ^4.3.0 and above does not work with Expo EventEmitter.