`TypeError: undefined is not an object` with React Native v0.64 (EventEmitter)

Question

`TypeError: undefined is not an object` with React Native v0.64 (EventEmitter)

JeffGuKang opened this issue 5 years ago · 9 comments

JeffGuKang commented 5 years ago

New Issue Checklist

I am not disclosing a vulnerability.
I am not just asking a question.
I have searched through existing issues.
I can reproduce the issue with the latest versions of Parse Server and the Parse JS SDK.

Issue Description

Versions

React Native: 0.64
Parse: 3.1.0

I get a error from metro bundler when I run iOS as below

 ERROR  TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[0], "../../../react-native/Libraries/vendor/emitter/EventEmitter").prototype.addListener')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

I think the error is related to
node_modules/parse/lib/react-native/EventEmitter.js

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');

EventEmitter.prototype.on = EventEmitter.prototype.addListener;
module.exports = EventEmitter;

Steps to reproduce

Build iOS with react native 0.64

Actual Outcome

.

Expected Outcome

Run without error

Environment

Client

Parse JS SDK version: 3.1.0

Logs

 ERROR  TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[0], "../../../react-native/Libraries/vendor/emitter/EventEmitter").prototype.addListener')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Answer 1 · 2021-04-07T04:23:28.000Z

I think the reason is related to module ordering.
if I call import Parse from 'parse/react-native' before import App from './App the error message is popped up.

Error

index.js

import 'react-native-gesture-handler'
import Parse from 'parse/react-native'
import {AppRegistry, LogBox} from 'react-native'
import App from './App'
import {name as appName} from './app.json'

No error

index.js

import 'react-native-gesture-handler'
import {AppRegistry, LogBox} from 'react-native'
import App from './App'
import {name as appName} from './app.json'
import Parse from 'parse/react-native'

But I should import Parse first for importing parse subclass through Parse.Object.registerSubclass('something', something) as below. (https://parseplatform.org/Parse-SDK-JS/api/master/Parse.Object.html#.registerSubclass)

'src/parse/schemas/index.ts'

interface Params {
  text: string
}

export class Abc extends Parse.Object<Params> {
  constructor(params: Params) {
    super('Abc', params)
  }
}

Parse.Object.registerSubclass('Abc', Abc)

index.js

// Initialize parse apis and schemas
import 'src/parse/initParse' // initilize parse
import 'src/parse/schemas' // registerSubclass for parse. 

import 'react-native-gesture-handler'
import {AppRegistry, LogBox} from 'react-native'
import App from './App'
import {name as appName} from './app.json'

And I found event emitter of react-native is using for live query on Parse.

So I can resolve issues remove livequery files related event emitter from parse.

parse/lib/react-native/EventEmitter.js
parse/lib/react-native/LiveQueryClient.js
parse/lib/react-native/LiveQuerySubscription.js
parse/lib/react-native/ParseLiveQuery.js

But it is not a perfect solution.

Answer 2 · 2021-04-08T15:57:38.000Z

I'm glad it worked for you. Can you try an alternative solution from this thread with your error?

Answer 3 · 2021-04-14T19:45:23.000Z

I'm also facing this issue with React Native 0.64.0. @JeffGuKang I'm struggling to reproduce your fix in my own project. Any pointers.? After deleting the files you mentioned I'm getting errors about the EventEmitter missing,

Answer 4 · 2021-04-15T00:42:34.000Z

I'm also facing this issue with React Native 0.64.0. @JeffGuKang I'm struggling to reproduce your fix in my own project. Any pointers.? After deleting the files you mentioned I'm getting errors about the EventEmitter missing,

I didn't delete files. Just remove codes only in the files.

Answer 5 · 2021-04-15T00:48:49.000Z

I'm also facing this issue with React Native 0.64.0. @JeffGuKang I'm struggling to reproduce your fix in my own project. Any pointers.? After deleting the files you mentioned I'm getting errors about the EventEmitter missing,

I think you can remove two lines from node_modules/parse/lib/react-native/Parse.js

Parse.LiveQuery = require('./ParseLiveQuery').default;
Parse.LiveQueryClient = require('./LiveQueryClient').default;

And use the patch package.

Answer 6 · 2021-04-15T01:00:05.000Z

I'm glad it worked for you. Can you try an alternative solution from this thread with your error?

I think the problem is importing parse first before importing react-native. Because Parse LiveQuery try to use EventEmitter from react native even RN is not initilized.

It can be solved to make user can control initialize timing of LiveQuery.

Parse.LiveQuery = require('./ParseLiveQuery').default;
Parse.LiveQueryClient = require('./LiveQueryClient').default;

I will test it.

Answer 7 · 2021-04-15T02:53:27.000Z

We should update the README.md as well with your import order solution

Answer 8 · 2021-04-15T13:40:05.000Z

I'm also facing this issue with React Native 0.64.0. @JeffGuKang I'm struggling to reproduce your fix in my own project. Any pointers.? After deleting the files you mentioned I'm getting errors about the EventEmitter missing,

I think you can remove two lines from node_modules/parse/lib/react-native/Parse.js
Parse.LiveQuery = require('./ParseLiveQuery').default;
Parse.LiveQueryClient = require('./LiveQueryClient').default;
And use the patch package.

That did indeed work! Thank you very much.

Answer 9 · 2021-04-19T16:26:02.000Z

I solved the problem by replacing the first line in node_modules/parse/lib/react-native/EventEmitter.js

from

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');

to

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/_EventEmitter');