React-native: 'ReactNative.Component' warning needs to give source filename and line number

[jay-depot]

When updating a React Native project from a pre-0.25.x version to a post-0.25.x version

This:

Seems you're trying to access 'ReactNative.Component' from the 'react-native' package. Perhaps you meant to access 'React.Component' from the 'react' package instead?

For example, instead of:

  import React, { Component, View } from 'react-native';

You should now do:

  import React, { Component } from 'react';
  import { View } from 'react-native';

Check the release notes on how to upgrade your code - https://github.com/facebook/react-native/releases/tag/v0.25.1

is a pretty common error message. It's also completely useless. It's not a big problem when hunting through one's own code for deprecated references. The problem happens if this is being triggered by something in an imported npm module. Then it becomes a game of auditing other people's code, which sort of defeats the purpose of pulling in npm modules completely. A filename and line number would at least give some clue as to which module needs to be upgraded.

Every error in React Native gives a filename and line number, (And they're almost always spot-on, which is unheard of in JavaScript) except this one. Why make an exception here?

[lynndylanhurley]

This error is killing me.

[mcliquid]

same here. it's a very dirty work to find all places manually.

[satya164]

If someone can investigate why it's not using source maps, it would be awesome.

[borischou]

Actually I got the same error here too, when I was following the RN tutorial: https://www.raywenderlich.com/126063/react-native-tutorial

[KevinHu2014]

you should use
import React, { Component } from 'react'; import { View } from 'react-native';
though it seems dirty work to find all places manually
but its necessary

[jay-depot]

@satya164 I'm not completely sure, but if I had to guess, it has something to do with the way the warning is implemented here: https://github.com/facebook/react-native/blob/803cb61346bcdf85d68df5cdfc1a392f78e6cac3/Libraries/Utilities/throwOnWrongReactAPI.js

Is there any reason why that Error object would be missing backtrace info when it's thrown?

[satya164]

@jay-depot It just throws a normal error. I think there's some other issue which prevents sourcemaps from loading when an error is throws too early.

[jay-depot]

@satya164 So... What's happening is this exception throws after a long list of 'import' and 'require' statements, all of which are synchronous, but (at this point I'm making an educated guess) sourcemaps load and process asynchronously?

(OK, to be truly accurate, the requires()'s and import's are resolved during bundling, and it's the class [....] extends [...] statements that are resolved too early, but the effect is the same)

[satya164]

@jay-depot Probably.

[skv-headless]

I've made a stacktrace #7459. I hope it will be in next release.

[satya164]

@skv-headless it's a student issue with sourcemaps not loading.

[bwithbroe]

@KevinHu2014 I think that's pretty clear from the error- the problem for this user (at least the problem for me) is that even following that same syntax the error still appears.

[adamski]

I"m stuck on this atm. RN 0.28 from 0.25. I've done a number of searches of my node_modules folder and tried to weed them out but still getting the error.

[sudhcha]

As for the RN tutorial that @borischou mentioned, the following changes help me get past this issue:

'use strict';

var React = require('react');
var ReactNative = require('react-native');

var styles = ReactNative.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
});


class PropertyFinderApp extends React.Component {
  render() {
    return React.createElement(ReactNative.Text, {style: styles.text}, "Hello World!");
  }
}

ReactNative.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });

[lnanek]

Still getting the error here (on React Native 0.33.0 on Android) as well despite hours of work changing all source files I have to the new format. I can only guess some dependency uses the old format, but have no clue what dependency that is since the stack trace feature is broken for this error.

Just going to have to try to find some way to patch the error out at this point since it is easier to modify React Native than a dozen dependencies...

[easynerdy]

Is everyone still getting this issue?
None of the above workarounds are working.

[crellison]

I just upgrades to RN 0.39.2 and am fully halted. Thought I would implement Redux and grab some helpful patches by upgrading, but everything has halted

[crellison]

Alright. I found a possible solution. Assuming everyone here is getting the error AND using react-redux one fix (assuming react-redux is the only one of your packages throwing the error) is to change the way you import certain elements from react-redux.

The Redux docs say to import their Provider and connect functions in your app root and components, respectively, as follows:

import { Provider } from 'react-redux/native';
import { connect } from 'react-redux/native';

Instead, remove native from the filepath and import them from the react-redux root:

import { Provider } from 'react-redux';
import { connect } from 'react-redux';

This got me past the previous error. I figured it out by going into node_modules/react-native/Libraries/Utilities/throwOnWrongReactAPI.js and adding a return statement in the main function before the error is thrown.

function throwOnWrongReactAPI(key: string) {
  return; // prevent the error from being thrown
  throw new Error(
`Seems you're trying to access 'ReactNative.${key}' from the 'react-native' package. Perhaps you meant to access 'React.${key}' from the 'react' package instead?

This changes the error screen that you see, revealing the stacktrace, which you can follow back to line in your own app (in my case it was when I imported the Provider from react-redux/native. Some quick searching revealed that that import style was an issue with the redux package for ReactNative, and I modified the statement to the recommended solution.

If you aren't using Redux, adding the error statement will still let you follow the stacktrace to the true source of your problem.

Cheers!

[koutsenko]

Still same error on RN 0.41.2, dumb error without stacktraces.
I use kauffecup/react-native-web-hello-world boilerplate.
There is already correct imports in the source.

Please, provide a way to handle an error source - filename and line number.
I've found a workaround for my case, just in index.android.js change first line:

import React, { Component, AppRegistry } from 'react-native';

to

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

[crellison]

@koutsenko I would check the package.json for the boilerplate you use to make sure that the npm package versions are up to date and not colliding

[HyperSimon]

Is everyone still getting this issue?
None of the above workarounds are working.

Here

[erangat-zz]

@crellison 's suggestion solved this issue for me.
I guess if you aren't using redux, it means maybe some other module you are using is causing this issue.

[dwilt]

I was sure that I wasn't importing React, Component, etc from react-native or anything like that so this was really pissing me off. I confirmed it wasn't that because I kept checkout previous commits in git and I know for a fact they were working and didn't have any issues. Once I realized that... I deleted my node_modules folder, reinstalled via yarn and then restarted the packager and it worked.

[RD1991]

Temporary solution may be -
I tried debugging and put the breakpoint at 'throwOnWrongReactAPI.js' file's first line, following the stack trace.

I got the erroneous file within a minute.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.