[Crash] Can't start my app after upgrading to v0.6.0-rc

[grin]

Tested in iOS simulator, here is the console output:

2015-06-12 13:59:56.066 [error][tid:com.facebook.React.JavaScript] "Error: undefined is not an object (evaluating 'RCTScrollViewConsts.KeyboardDismissMode.None')
 stack: 
  <unknown>       index.ios.bundle:24120
  require         index.ios.bundle:244
  <unknown>       index.ios.bundle:23173
  require         index.ios.bundle:244
  <unknown>       index.ios.bundle:1144
  require         index.ios.bundle:244
  <unknown>       index.ios.bundle:1112
  require         index.ios.bundle:244
  applyWithGuard  index.ios.bundle:880
  require         index.ios.bundle:195
  <unknown>       index.ios.bundle:47474
 URL: http://localhost:8081/index.ios.bundle
 line: 24120
 message: undefined is not an object (evaluating 'RCTScrollViewConsts.KeyboardDismissMode.None')"
2015-06-12 13:59:56.087 [error][tid:com.facebook.React.BridgeMethodQueue][RCTBridge.m:432]
 RCTDataManager.queryData was called with 4 arguments, but expects 3

[chirag04]

I'm getting the exact same error after update. @brentvatne: seems to be related to #1578

[sahrens]

FYI: It's helpful if you include the stack trace with sourcemaps (a screenshot of the redbox should be sufficient).

But I think this is just from a breaking API change - replace usage of RCTScrollViewConsts.KeyboardDismissMode.None in your code with just the string 'none'

[sahrens]

please re-open if there is something else going on.

[chirag04]

@sahrens I'm not using keyboardDismissMode in my app at all. I'm using using <ScrollView>....</ScrollView>

After some debugging, this error seems to be coming from react-native code itself. Here:
https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L323

It expects RCTScrollView.Constants to export KeyboardDismissMode. However only DecelerationRate is exported. Hence the error.

re-open ?

[sahrens]

That code is only in the "if (Platform.OS === 'android')" branch which
isn't used in OSS yet...
On Sat, Jun 13, 2015 at 10:13 AM Chirag notifications@github.com wrote:

@sahrens https://github.com/sahrens I'm not using keyboardDismissMode
in my app at all. I'm using using ....

After some debugging, this error seems to be coming from react-native code
itself. Here:

https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L323

It expects RCTScrollView.Constants to export KeyboardDismissMode. However
only DecelerationRate is exported. Hence the error.

—
Reply to this email directly or view it on GitHub
#1606 (comment)
.

[chirag04]

Ok. I took the latest master. I have attached the screenshots.

Error seems to come from line 24289 in the bundle. I have attached the screenshot of those lines in the bundle. Not where how are these constants coming here.

Let me know if you need more info.

[sahrens]

Hmm, do the source maps ever work for you? Looks like they didn't load
here. cc @frantic, @amasad

I'll dig into the actual failure...not sure how it could be so broken...
On Sat, Jun 13, 2015 at 11:56 AM Chirag notifications@github.com wrote:

Ok. I took the latest master. I have attached the screenshots.

Error seems to come from line 24289 in the bundle. I have attached the
screenshot of those lines in the bundle. Not where how are these constants
coming here.

Let me know if you need more info.

[image: ios simulator screen shot jun 13 2015 2 52 30 pm]
https://cloud.githubusercontent.com/assets/954063/8145604/f9d4a3dc-11db-11e5-98ce-c9b50f0655c4.png
[image: screen shot 2015-06-13 at 2 52 48 pm]
https://cloud.githubusercontent.com/assets/954063/8145605/fc6bb996-11db-11e5-9d2f-eb301c0476f2.png

—
Reply to this email directly or view it on GitHub
#1606 (comment)
.

[chirag04]

As a matter of fact, the project was generated before react-native 0.4 i guess. Not sure if that has got anything to do here.

[amasad]

Do you have sourcemaps turned off in chrome?

[chirag04]

yes. I have it turned off in chrome.

[sahrens]

I just tried react-native init, then upgraded to 0.6.0-rc and npm installed again, recompiled, and everything still works with scrollview and I don't see any references to KeyboardDismissMode outside of that android-gated code.

You should turn them back on in chrome so we can see what your stack trace is. Also, not sure why they aren't working in the RedBox - separate issue, but your setup definitely has some breakage.

Did you make sure to do a clean and recompile in Xcode (cmd+shift+K, cmd+R) after upgrading? Also maybe try restarting the packager server with --reset-cache?

[Sing-Li]

Here are some observations:

1. if you use any recent versions of react-native init to scaffold, you will not have this problem
2. if you just go into the Examples/SampleApp and start hacking the code there to create your app -- you eventually will have this problem
3. you will ONLY have this problem if you git clone'd the repo and are working off source

Clues:

1. if you used recent versions of react-native init to scaffold - you WILL HAVE package.json in the app directory, and 'npm install' will place all the node_modules dependencies under the app directory; if you use npm start to run the packager -- the packager will only search from your app directory downwards ... it will never see the root react-native git-cloned source directory
2. if you just hacked the Examples/SampleApp - even in today's master - there is no package.json, and no node_modules in the app directory ... instead, the compiled code running in the emulator is somehow wired to ask the packager for a search from the root git-cloned react-native source directory for the .js files

[chirag04]

I think --reset-cache did it.

[sahrens]

@amasad: Sounds like we're not properly clearing cache/restarting the server on upgrade - something you can fix?

[Sing-Li]

Is the --reset-cache option undocumented on packager?

With --help it shows:

> react-native@0.6.0 start /Users/sam/dev/react-native
> ./packager/packager.sh --help

Options:
  --port                                                                           [default: 8081]
  --root           add another root(s) to be used by the packager in this project
  --assetRoots     specify the root directories of app assets                    
  --platform       Specify the platform-specific blacklist (ios, android, web).    [default: "ios"]
  --skipflow       Disable flow checks                                           
  --nonPersistent  Disable file watcher

With source map enabled on chrome debugger - exception was first caught here:

zooming to stack trace:

Then later leading to the 'red box exception:

Please lmk if a gzipped index.ios.bundle + index.ios.map may be helpful.

[grin]

In my case this issue was caused by the react-native-viewport dependency in my app which itself depended on an older version of react-native. It was all fixed after I bumped it to v0.6.0-rc (pjjanak/react-native-viewport#5) and re-linked it to my project.

[Sing-Li]

@grin THANKS!! That's the vital clue.

Issue isolated!

The packager seems to just recursively spider from the root git-cloned react-native directory down to scan for dependencies (avoiding only explicitly blacklisted dirs) and will load any old version of node-modules/react-native lying around.

So if you go to your root git-cloned react-native directory and then do a:

find . -name 'react-native' -print

... you will see any old react-native npm-installs lying around that the packager might decide to load, and cause the problem.

From my previous post on the 'observations' , you will see a mix of:

• pre- '0.4.x' generated scaffolds that do not use package.json
• post - '0.4.x' generated scaffolds that use package.json

The problem is that for post-'0.4.x' generated projects, UNDER THE react-native/Examples directory (which the Facebook testers will almost never have with fresh git-clones, but most devs tinkering with react-native are likely to hastily create), there might be node-modules/react-native lying around that are not 0.6.0-rc! The packager gladly load it into the ios.js.bundle - causing the problem.

I suppose other than the Examples directory, one can also have copies of stale node-modules/react-native from anything that one did npm install react-native-latest-and-greatest-component -g on.

I suppose it can also cause #1646 , and #1578 .

For my case, the bypass for now is to search-and-destroy any old node-modules/react-native lying around manually. Or blacklist the Examples directory.

[jawadrehman]

after successfully updating my packages, i was able to start the app... but I get this warning in
XCode

instance method 'eventDispatcher' in category from >/Users/jawad/Library/Developer/Xcode/DerivedData/VoxIosApp->azaijsjijhyvgacmwwmnuorswkql/Build/Products/Debug->iphonesimulator/libReact.a(RCTEventDispatcher.o) overrides method from class in >/Users/jawad/Library/Developer/Xcode/DerivedData/VoxIosApp->azaijsjijhyvgacmwwmnuorswkql/Build/Products/Debug-iphonesimulator/libReact.a(RCTBridge.o)

On trying to validate the app ...

[brentvatne]

@jawadrehman - that shouldn't cause any problems, related to #1562 - PR welcome 😄

[jawadrehman]

@brentvatne even the first message on xCode isn't going to cause problems ?

[brentvatne]

@jawadrehman - actually I'm not familiar with the first one cc @tadeuzagallo

[tadeuzagallo]

The warning is safe, but it has already been fixed.

[owais]

If one of your dependencies specifies react-native as a dependency itself, then react-native is also installed inside the node_modules directory of that dependency. This leaves older versions of react-native inside your source tree. For me the solution was to manually edit the culprits package.json file and remove react-native from dependencies list and also remove react-native from their node_modules.

[wootwoot1234]

@owais I figured that out as well just now. Worked great. Here is what I did (same thing as @owais just in different words incase someone is confused.):

It had to do with a component I was using, in my case react-native-device. What I had to do to fix it was delete the /node_modules folder located in the component. AppName/node_modules/React-Native-Component/node_modules.

I also updated the dependencies in the package.json file also located in the component folder AppName/node_modules/React-Native-Component/package.json and change the react-native dependency to (or something similar):

  "peerDependencies": {
    "react-native": ">= 0.4.0 < 1"
  },

Why do components need to specify react native as dependency. Seems like it's implied, right? Can I just remove the dependency?

[owais]

Yes, components should not specify react-native as a dependency. It causes many problems. Not to mention that it significantly increases installation time and each module that does this ends up imprting its own version of react-native instead of the one the developer is working on.

[chauthai]

I've just ran into the same problem upgrading from 0.5 to 0.6.
Deleting react-native instances in third party component node_modules folders, editing react native dependencies to peerDependencies in third party components AND resetting the cache of the packager resolved the starting errors of my app:

./node_modules/react-native/packager/packager.sh --reset-cache

Third-party components in use:

• react-native-facebook-login
• tcomb-form-native
• react-native-geocoder
• react-native-router

[fatuhoku]

+1 I ran into this issue after having creating a new project with react-native init. Not encouraging! What's the current workaround? I clearly should have just read the message above.

./node_modules/react-native/packager/packager.sh --reset-cache worked for me.

[amasad]

It sounds like the packager should fail loudly when it sees multiple versions of react-native installed. And we should establish a community standard around only using peerDependencies when depending on react-native. Thoughts?

[chauthai]

@amasad I think a short guide how to write 3rd party components would be nice. Included should be a guideline how to setup a node project etc...

[owais]

@amasad +1

[ilansas]

@chauthai I agree this would be nice

[Sing-Li]

a) packager loudly fails (but please do not exit console) 👍 because it will stop devs from looking everywhere else for the cause of this red screen of death

b) peerDependencies as a fix rather than a temporary bypass 👎 The divergence from npm behavior might prevent a healthy growth of the React Native components ecosystem for the longer term (unmaintained broken components all over github, for example)

[brentvatne]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out it's new home: https://productpains.com/post/react-native/crash-cant-start-my-app-after-upgrading-to-v060-rc