diff --git a/Libraries/Utilities/throwOnWrongReactAPI.js b/Libraries/Utilities/throwOnWrongReactAPI.js new file mode 100644 index 000000000..4685a4071 --- /dev/null +++ b/Libraries/Utilities/throwOnWrongReactAPI.js @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule throwOnWrongReactAPI + * @flow + */ + +'use strict'; + +function throwOnWrongReactAPI(key: string) { + 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? + +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 +`); +} + +module.exports = throwOnWrongReactAPI; diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index c9129314c..c3096adfd 100644 --- a/Libraries/react-native/react-native.js +++ b/Libraries/react-native/react-native.js @@ -174,6 +174,20 @@ const ReactNative = { }, }; +// Better error messages when accessing React APIs on ReactNative +if (__DEV__) { + const throwOnWrongReactAPI = require('throwOnWrongReactAPI'); + const reactAPIs = [ 'createClass', 'Component' ]; + + for (const key of reactAPIs) { + Object.defineProperty(ReactNative, key, { + get() { throwOnWrongReactAPI(key); }, + enumerable: false, + configurable: false + }); + } +} + // Preserve getters with warnings on the internal ReactNative copy without // invoking them. const ReactNativeInternal = require('ReactNative');