Comments
This was referenced
Oct 20, 2019
This was referenced
Oct 25, 2019
cpojer
pushed a commit
to facebook/metro
that referenced
this issue
Jan 8, 2020
Summary: **Summary** On Windows with Node.js v12.x.x, Metro crashes with ``` SyntaxError: Invalid regular expression: /(.*\__fixtures__\.*|node_modules[\]react[\]dist[\].*|website\node_modules\.*|heapCapture\bundle.js|.*\__tests__\.*)$/: Unterminated character class ``` This has been reported in #453, facebook/react-native#26829, facebook/react-native#26969, facebook/react-native#26878, facebook/react-native#26598, expo/expo-cli#1147 and expo/expo-cli#1074. There are a few open pull requests attempting to fix this same issue: * #464 * #461 * #458 * #454 However, none of the existing PRs address the *root cause* of this error: the `escapeRegExp` function in `blacklist.js` tries to convert regular expressions to be agnostic to the path separator ("/" or "\"), but turns some valid regular expressions to invalid syntax. The error was is this line: https://github.com/facebook/metro/blob/142348f5345e40ce2075fc7f9dfa30c5d31fee2a/packages/metro-config/src/defaults/blacklist.js#L28 When given a regular expression, such as `/node_modules[/\]react[/\]dist[/\].*/`, on Windows where `path.sep` is `` (which is also an escape character in regular expressions), this gets turned into `/node_modules[\]react[\]dist[\].*/`, resulting in the `Unterminated character class` error. Automatically replacing `[/]` with `[]` is an error, as is replacing `[/]` with `[\]`, because in both of these cases the backslash before the end of character class "]" escapes it, and the character class becomes unterminated. Therefore, this PR changes the code to look for both escaped forward slash `/` and forward slash `/`, and always replace them with the escaped version (`/` or `\`, depending on the platform). This fixes #453. **Test plan** Added a test case that exercises the code with both `` and `/` as path separators. Pull Request resolved: #468 Differential Revision: D18201730 Pulled By: cpojer fbshipit-source-id: 6bb694178314c39d4d6a0fd9f8547bfa2c36f894
facebook
locked as resolved and limited conversation to collaborators
Oct 3, 2021
React Native is one of the most used JavaScript mobile frameworks today. React Native enables developers who are familiar with JavaScript and the React web framework to develop mobile applications using similar methods and principles.
As a React Native developer, you’re bound to run into some errors when developing your application. When an error is detected by the compiler when running the code, it terminates the process and displays an error message.
Error messages in React Native are very descriptive. They tell the developer what error occurred and where the error was detected. In addition, they often provide clear instructions or at least a clue on how to resolve the issue.
Some errors are inherently easier to debug than others. For example, errors that happen as a result of using the wrong syntax or accessing undefined variables or components are easier to debug than errors caused by misconfigurations or incompatible dependencies.
Regardless of the nature of the error, you’ll often need help to resolve them.
In this post, I’ll cover some common React Native errors and their solutions. Some of these errors will have different solutions depending on what causes the error in the first place. For such errors, go through the solutions one after another.
Feel free to skip to any of the following sections using the links below:
- Failed to install the app
- Unable to load script
- React Native
run-android
command is unrecognized react-native
command not found- Unrecognized command: “link”
- Duplicate resources
Failed to install the app
After creating a new React Native project, when attempting to run the app for the first time with the command react-native run-android
, you might encounter the following error:
BUILD FAILED in 13s error Failed to install the app. Make sure you have an Android emulator running or a device connected. Run CLI with --verbose flag for more details. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. ...
This error message says that the build process wasn’t successful and also specifies the particular command that failed. Sometimes you can get rid of the error by simply using new command prompts and restarting the virtual devices.
Oftentimes, however, the error is caused by using an incompatible Gradle version to build the app.
The Android studio build system requires the right version of Gradle to successfully build Android apps. In this case, you’ll need to upgrade the Gradle version used in your app to one that is compatible with your Android studio build system.
Follow these steps:
- Open your React Native application in a text editor like VS Code
- In the application’s root folder, navigate to
android > gradle > wrapper
- Edit the
gradle-wrapper.properties
file - Update the
distributionUrl
variable with the URL for a compatible version of Gradle - Run
react-native run-android
again to build the app using the new version.
Here’s the full path for steps two and three:
{your-project-folder}androidgradlewrappergradle-wrapper.properties
To get the accurate version of Gradle for step four, go to Gradle’s distributions list and check for the latest -all.zip
Gradle version. Then, update the distributionUrl
variable as follows:
distributionUrl=https://services.gradle.org/distributions/gradle-{latest version}.zip
To learn more about Gradle and Android studio, read the Android Gradle plugin and Android Studio compatibility article.
Unable to load script
Another error that developers commonly encounter when attempting to run their React Native application is shown below:
Unable to load script. Make sure you're either running a metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
This error is always displayed on the connected Android device. There are several causes for this error. As such, there are different solutions too.
Solution 1: Package the bundle correctly
All of your app’s JavaScript is bundled into the index.android.bundle
file. If the bundle file is unavailable or not correctly packaged, you’ll get the Unable to load script
error. Follow the instructions below to fix it.
Go into {your-project-folder}/android/app/src/main/
folder and check if an assets
folder exists within it. If the assets folder isn’t already there, create it.
Next, directly from your root folder, run this:
cd android ./gradlew clean
Next, open a command terminal and make sure it’s pointed to your project’s root folder. If your project has just one file (i.e index.js
), run the following command:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
If there are two files (i.e. index.android.js
and index.ios.js
) then run the following instead:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Note that both are single commands.
After the bundle has been generated, run react-native run android
.
To execute all the above steps at once, you can place them in the scripts
section of package.json like so:
"android-script": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"
The command for the above is npm run android-script
.
Solution 2: Use adb reverse
If you keep getting the same error after implementing the first solution, then you need to consider other causes. Another common cause is that the port wasn’t exposed. This happens if you’re running your app on a physical device.
The adb reverse
command lets you to expose a TCP port on your Android device with a TCP port on your computer. To try fixing the error, run the following command:
adb reverse tcp:8081 tcp:8081
Here you are exposing TCP port 8081 on the phone via port 8081 on your computer.
If you do not have the Android platform tools component in your Windows PATH
variable, then the adb
executable is found at the following path:
C:Users{your-username}AppDataLocalAndroidsdkplatform-tools
Solution 3: Add cleartext support
If the first two options don’t solve React Native’s inability to load the script, then it’s likely that the error is coming from a network communication problem.
Specifically, it’s likely that the app is inaccessible from the development server due to cleartext support being disabled, as is the case from Android 9.0 (API level 28) onwards.
To fix this, modify the AndroidManifest.xml
file and add cleartext support as follows:
<?xml version="1.0" encoding="utf-8"?> <manifest ...> <uses-permission android:name="android.permission.INTERNET" /> <application ... android:usesCleartextTraffic="true" ...> ... </application> </manifest>
You can find your AndroidManifest.xml
file in:
{your-project-folder}/android/app/src/main/AndroidManifest.xml
Restart your application for the change to be applied.
React Native run-android
command is unrecognized
Sometimes when you attempt to run your React Native app on Android, you might get the following error message on the command prompt:
Command run-android unrecognized. Did you mean to run this inside a react-native project?
The error message already hints at the most common cause of the error: you’re not running the command in a React Native folder. In this case, the solution is to simply ensure that you navigate to your application’s root folder before running the app. This is what I mean:
// After initializing a project: react-native init AwesomeProject // Make sure to navigate to the project folder: cd AwesomeProject // Before you run the app: react-native run-android
Otherwise, if the error wasn’t a result of using the wrong folder, then it’s possible that you didn’t install the contents of the project. To do that, run:
npm install or yarn install
It’s also possible that your global installation of react-native or react-native-cli is old or broken. In this case, simply reinstall your libraries globally using one of the following commands:
npm:
npm install -g react-native && npm install -g @react-native-community/cli
Yarn:
yarn global add react-native && yarn global add @react-native-community/cli
As a note, I recommend using npx (included in npm v5.0+) to install libraries on demand.
This means that whenever you run npx react-native init <your-project-name>
or any other React Native CLI command, it’ll first ask for your permission to install react-native
before creating the project. This ensures that you always use the latest version at all times!
Lastly, if all of the above fails to work, you might need to upgrade your npm with the following command:
npm install [email protected] -g
Ensure that you run each of these commands using a new terminal. This is to prevent using outdated path sources in your .bashrc
file.
react-native
command not found
command not found: react-native
is another common error in React Native. You encounter this error when attempting to run any react-native
command, such as when you try to initialize a React Native project, like so:
react-native init MyProject
The command not found
error has two potential causes: either you do not have the CLI installed on your local machine, or you do, but it’s not properly configured.
Both of these scenarios can be avoided by using npx for all npm executables. For example, to create a new React Native app, run it with npx as follows:
npx react-native init MyProject
This will install the latest available version of the react-native
package before initializing the project.
Unrecognized command: “link”
When attempting to link assets like custom fonts or icons in a React Native project, you might get the following error on your command terminal:
error Unrecognized command "link". info Run "react-native --help" to see a list of all available commands.
This error occurs when you attempt to use the manual linking feature (i.e. react-native link
and react-native link unlink
commands), which have been removed in React Native 0.69 and replaced with autolinking.
To avoid this error, you’ll need to use a third-party asset linking library such as react-native-asset
to link assets automatically.
First, install the library with one of the following commands:
npm install -g react-native-asset # or if you're using yarn: yarn global add react-native-asset
Then create a react-native.config
file at the root level of the project folder and add the below code snippet:
module.exports = { project: { ios: {}, android: {} }, "assets": [ "./src/assets/font", "./src/assets/mp3", "./src/assets/icons" ] };
Run one of the below commands to enable automatic linking and unlinking in your codebase.
npm:
npx react-native-asset
yarn:
yarn react-native-asset
Now you can use any of the specified assets in your code. For example, you can use a custom font in your stylesheet:
fontFamily: 'my-custom-font'
Duplicate resources
Another common error that you might face when attempting to generate a release APK using Generate Signed APK
from Android Studio
is the Duplicate Resource error:
[drawable-mdpi-v4/jumper] /Users/admin/Projects/testApp/android/app/src/main/res/drawable-mdpi/jumper.png [drawable-mdpi-v4/jumper] /Users/admin/Projects/testApp/android/app/build/generated/res/react/release/drawable-mdpi-v4/jumper.png: Error: Duplicate resources :app:mergeReleaseResources FAILED FAILURE: Build failed with an exception. ...
The build failure occurred because duplicated resources were found in the Android project inside the Android folder. There are various solutions for this depending on the cause.
Solution 1: Cleaning the drawable folder from the terminal
Oftentimes you can get rid of the error simply by cleaning the drawable
folder from the terminal using Gradle. To do this, cd
into the android
folder, then run ./gradlew clean
before attempting to run the app again:
react-native run android
If it fails, try the next solution.
Solution 2: Add some helper code
Most times, simply cleaning the drawable
folder won’t resolve the issue. If that’s the case, then you’ll need to make a slight modification in the react.gradle
file to prevent duplicate resource collisions.
Add the following helper code in the react.gradle
file found in node_modules/react-native/react.gradle
. The code should be placed right after the doFirst
block:
doLast { def moveFunc = { resSuffix -> File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}"); if (originalDir.exists()) { File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}"); ant.move(file: originalDir, tofile: destDir); } } moveFunc.curry("ldpi").call() moveFunc.curry("mdpi").call() moveFunc.curry("hdpi").call() moveFunc.curry("xhdpi").call() moveFunc.curry("xxhdpi").call() moveFunc.curry("xxxhdpi").call() }
This error was solved in 2018 by GitHub user echaso, who provided the code above.
Conclusion
In this article, we looked at six common errors in React Native and how each of these errors can be debugged. If the error you encountered isn’t included here, do not hesitate to check this article for possible solutions.
Anyways, thanks for reading and see you next time!
LogRocket: Instantly recreate issues in your React Native apps.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket’s product analytics features surface the reasons why users don’t complete a particular flow or don’t adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
04 Jul 2017
- iOS errors
- Android errors
- JS errors
- Couldn’t find preset “es2015”
- React.Children.only expected to receive a single React element child
- Maximum call stack size exceeded
- In next release empty section headers will be rendered
- onEndReached event of ListView keeps on firing
- ListView becomes blank
- SyntaxError wallet.png: Unexpected character (1:0)
- Actions must be plain objects
- TouchableOpacity ignores initial opacity
- Unknown named module
- ScrollView with unbounded height doesn’t grow on scrolling
- TextInput inside TouchableOpacity intercepts touches
fontWeight={600}
is not applied to TextInput- undefined is not an object (evaluating ‘Sentry.options.logLevel’)
- ScrollView content is partially hidden below when scrolled to the bottom
- ScrollView inside Modal doesn’t respect
keyboardShouldPersistTaps='handled'
- Swiper image (child) is occasionally blank
- TextInput jumps when added dynamically
- image uploading doesn’t work in emulator
- Loading dependency graph, done.
- [0.45.1] Cannot find module X
- [0.45.1] DeviceInfo native module is not installed correctly
- [0.45.1] Unhandled JS Exception: undefined is not an object
- [0.47.0] Module JSTimersExecution is not a registered callable module
- [0.52.1] Error: While resolving module
react-native-vector-icons/Octicons
- [0.52.1] Cannot read property ‘func’ of undefined
- [0.52.1] Cannot read property ‘appVersion’ of undefined
- [0.52.1] Invariant Violation: Native component for “BVLinearGradient” does not exist
- [0.52.1] TypeError: Cannot read property ‘isPickerShow’ of undefined
- [0.52.1] Cannot read property ‘showImagePicker’ of undefined
- [0.52.1] TypeError: undefined is not an object (evaluating ‘Contacts.getAll’)
- [0.52.1] production release crashes on startup (in both Android and iOS devices)
- [0.59.9] react-native-push-notification: Appears to be a git repo or submodule.
- [0.59.9] Plugin/Preset files are not allowed to export objects, only functions.
- [0.59.9] The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option, whose value must be a boolean
- [0.59.9] TypeError: undefined is not an object (evaluating ‘props.getItem’)
- [0.59.9] withRef is removed
try resetting cache first before googling the error:
$ react-native start --reset-cache
iOS errors
- React Native — iOS
(troubleshooting
section)
Android errors
- React Native — Android
(troubleshooting
section)
JS errors
Couldn’t find preset “es2015”
emulator window:
SyntaxError: TransformError: <APP_DIR>/node_modules/shallowequal/index.js:
Couldn't find preset "es2015" relative to directory "<APP_DIR>/node_modules/shallowequal"
solution
it has turned out that shallowequal
is the only module in node_modules/ that
configures Babel presets to use in its package.json:
"babel": {
"presets": [
"es2015"
]
},
quick-and-dirty fix for both Android and iOS:
- remove offending section from package.json of
shallowequal
package - restart packager — no error
- get that section back
- restart packager — still no error
even if shallowequal
package is removed from filesystem and installed again
the error no longer occurs — maybe the ‘right’ version of shallowequal
package
is cached somewhere?
NOTE: still the error might occur the next time emulator is run.
[Android] the error might disappear after enabling hot reloading in emulator
(<D-m>
→ Enable Hot Reloading
) — enabling live reload has no effect.
[iOS] enabling hot reloading never helped — use the fix above.
all in all IDK why this error occurs and how to fix it in general.
UPDATE
- https://github.com/dashed/shallowequal/issues/11
- https://github.com/dashed/shallowequal/commit/f515936c8a790fbc225add864265b6c82881c9b1
bug was fixed in v1.0.2 by moving Babel settings to .babelrc so that they are
not consumed by RN packager by default.
react-side-effect
is the only package that depends on shallowequal
package
(according to package-lock.json) => update react-side-effect
to update its
dependencies (including shallowequal
) to their latest version:
$ npm update react-side-effect
React.Children.only expected to receive a single React element child
device system log:
<Critical>: Unhandled JS Exception: React.Children.only expected to receive a single React element child.
solution
- https://facebook.github.io/react-native/docs/touchablehighlight.html
TouchableHighlight must have one child (not zero or more than one). If you
wish to have several child components, wrap them in a View.
Maximum call stack size exceeded
device system log:
<Warning>: Warning: Cannot update during an existing state transition
(such as within `render` or another component's constructor).
Render methods should be a pure function of props and state;
constructor side-effects are an anti-pattern, but can be moved to
`componentWillMount`.
<Error>: Maximum call stack size exceeded.
<Critical>: Unhandled JS Exception: Maximum call stack size exceeded.
solution
- https://stackoverflow.com/questions/37387351
DON’T:
- dispatch Redux actions (
this.props.store.dispatch(...)
) or - set component state (
this.setState(...)
)
in render()
method or any other method that is called from render()
method
(that is when component is being rendered) — this will cause an infinite loop.
for example, if you dispatch action when component is being rendered:
- reducers update the store according to that action
- parent component is re-rendered using
forceUpdate()
(in my case it’s
subscribed to store updates) - component is re-rendered too
- action is immediately dispatched again (infinite loop)
to avoid infinite loop dispatch actions and set component state only in
- constructor or
- callbacks that are not immediately invoked when component is being rendered
emulator window:
Warning: In next release empty section headers will be rendered. In this
release you can use 'enableEmptySections' flag to render empty section headers.
solution
- https://github.com/FaridSafi/react-native-gifted-listview/issues/39#issuecomment-217073492
If you use cloneWithRows then you don’t have sections and so there’s no issue
with section headers showing up. The confusing part is that even if you don’t
use sections, it will still throw the warning mentioning sections. In this
case, you can just set enableEmptySections={true} and forget about it.
<ListView
enableEmptySections={true}
...
/>
onEndReached event of ListView keeps on firing
solution
- https://stackoverflow.com/questions/38531369
- https://github.com/facebook/react-native/issues/6002
- https://facebook.github.io/react-native/docs/refreshcontrol.html
don’t nest ListView
in ScrollView
— this is what causes onEndReached
event
to be triggered again and again.
in most cases it means not to use ScrollView
at all if you have to use
ListView
:
- if you use
refreshControl
property ofScrollView
note thatListView
has
the same property - if you use some header in
ScrollView
it’s possible to render the very same
header inrenderHeader
callback ofListView
ListView becomes blank
when pushing another page and then going back to page with ListView
the latter
becomes blank (nothing is rendered where ListView
is supposed to be rendered).
at the same time adjacent components are rendered properly (=> it’s not that
wrapped collection becomes empty).
solution
- https://github.com/facebook/react-native/issues/8607
<ListView
removeClippedSubviews={false}
...
/>
though I guess it’s more of a hack than real solution.
SyntaxError wallet.png: Unexpected character (1:0)
the error occurs sometimes after adding new icon or updating existing one.
solution
restart packager (react-native start
) and reload application in emulator.
Actions must be plain objects
emulator window:
Actions must be plain objects. Use custom middleware for async actions.
the error occurs when trying to dispatch a thunk (Thunk middleware is applied).
solution
I used curly braces instead of parens when defining thunk action creator:
- export const requestCreateAuthentication = (phone_number) => {
+ export const requestCreateAuthentication = (phone_number) => (
(dispatch, getState, api) => {
// ...
}
- }
+ )
TouchableOpacity ignores initial opacity
TouchableOpacity
ignores opacity
property — it’s set only when application
is hot reloaded in emulator.
solution
- https://github.com/facebook/react-native/pull/12628
- https://github.com/facebook/react-native/pull/8909
according to these links the issue has been closed (that is fixed) but it
doesn’t look like this (or maybe it’s another but related issue).
anyway I’ve found a workaround — create nested View
and set opacity
property
on it instead of TouchableOpacity
itself:
<TouchableOpacity>
<View style={{opacity: 0.5}}>
<Text>{title}</Text>
</View>
</TouchableOpacity>
Unknown named module
the error occurs when trying to load image using Image
.
device system log:
<Notice>: { [Error: Unknown named module: '~/components/_new/graphics/images/ion-ios-person.png'] ... }
solution
- https://github.com/facebook/react-native/issues/2481
it turns out you cannot load images dynamically — provide static URI instead
(that is don’t construct it dynamically, say, using variable interpolation):
<Image
style={{height: 30, width: 35}}
source={require('~/components/_new/graphics/images/ion-person-stalker.png')}
/>
ScrollView with unbounded height doesn’t grow on scrolling
- https://stackoverflow.com/a/43525913/3632318
I use ScrollView
as a top-level container — when all its content doesn’t fit
on the screen (say, on iPhone 4s), the ScrollView
doesn’t grow when trying to
scroll down: hidden content becomes visible but overflows the container.
the solution is to use flexGrow: 1
instead of flex: 1
for container:
<ScrollView
contentContainerStyle={{flexGrow: 1}}
scrollEnabled={true}
></ScrollView>
TextInput inside TouchableOpacity intercepts touches
when TouchableOpacity
wraps TextInput
and the latter is pressed, onPress
callback of TouchableOpacity
is not invoked.
solution
- https://github.com/facebook/react-native/issues/14958#issuecomment-324237317
<TouchableOpacity onPress={this._handlePress}>
<View pointerEvents='none'>
<TextInput editable={false} />
</View>
</TouchableOpacity>
fontWeight={600}
is not applied to TextInput
the error occurs if Gill Sans font is used only — setting font weight works with
Text
and when default font is used instead.
solution
TODO: still not resolved.
undefined is not an object (evaluating ‘Sentry.options.logLevel’)
device system log:
<Notice>: { [TypeError: undefined is not an object (evaluating 'Sentry.options.logLevel')] ... }
solution
https://github.com/getsentry/react-native-sentry/issues/237#issuecomment-330779566:
Sentry.config(SENTRY_ENDPOINT);
if (!__DEV__) {
Sentry.install();
}
ScrollView content is partially hidden below when scrolled to the bottom
make sure that all ScrollView
parents have flex: 1
.
ScrollView inside Modal doesn’t respect keyboardShouldPersistTaps='handled'
- https://github.com/facebook/react-native/issues/10138
make sure to set keyboardShouldPersistTaps='handled'
on ALL parent
ScrollView
s outside of Modal
:
cares about its (scrollview) parent stack, I assumed it would be like
if rendered on top level
this error seems to be reproduced only when ScrollView
is rendered inside
Modal
.
Swiper image (child) is occasionally blank
this often happens, say, after removing the child (game in my application) —
adjacent game should become visible but blank area is shown instead.
solution
- https://github.com/leecade/react-native-swiper/issues/196#issuecomment-249540289
- https://github.com/leecade/react-native-swiper/issues/609
- https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews
adding removeClippedSubviews={false}
property to Swiper
component seems to
solve the problem for the time being (AFAIU when this property is false, all
offscreen children are force rendered — this might be not suitable for long
lists but in my case all lists are short so it shouldn’t be a problem).
UPDATE
still this doesn’t help — the only solution that works thus far is
https://github.com/leecade/react-native-swiper/issues/609#issuecomment-338190488.
UPDATE
nothing of the above works )
consider using react-native-snap-carousel
instead of react-native-swiper
.
TextInput jumps when added dynamically
solution
set minHeight
and initialHeight
properties:
<TextInput value='foo' minHeight={20} initialHeight={20} />
image uploading doesn’t work in emulator
response from AWS:
<Error>
<Code>MalformedPOSTRequest</Code>
<Message>The body of your POST request is not well-formed multipart/form-data.</Message>
</Error>
emulator window:
[RNDebugger] Detected you've enabled Network Inspect and you're using `uri`
in FormData, it will be a problem if you use it for upload, please see the
documentation (https://goo.gl/yEcRrU) for more information.
solution
- https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md
disable Network Inspect
:
Redux DevTools |
---|
RMB → Disable Network Inspect |
Loading dependency graph, done.
react-native start
hangs after Loading dependency graph, done.
message.
solution
- https://github.com/facebook/react-native/issues/16798
I’m not sure but maybe reinstalling Watchman helped to resolve the issue:
$ brew uninstall watchman
$ brew install watchman
[0.45.1] Cannot find module X
$ react-native start
...
> node node_modules/react-native/local-cli/cli.js start
module.js:487
throw err;
^
Error: Cannot find module 'xmldoc'
at Function.Module._resolveFilename (module.js:485:15)
and similar errors when some module cannot be found.
solution
use yarn instead of npm — somehow it managed to install all required
dependencies:
$ rm package-lock.json
$ rm -rf node-modules
$ yarn install
$ yarn start
[0.45.1] DeviceInfo native module is not installed correctly
emulator window:
DeviceInfo native module is not installed correctly
solution
- https://github.com/rebeccahughes/react-native-device-info/issues/176
rebuild application.
[0.45.1] Unhandled JS Exception: undefined is not an object
emulator window:
Unhandled JS Exception: undefined is not an object (evaluating 'PropTypes.shape')
solution
- https://github.com/jsierles/react-native-audio/issues/83
first I tried to upgrade RN again:
$ react-native upgrade
...
You should consider using the new upgrade tool based on Git. It makes upgrades easier by resolving most conflicts automatically.
To use it:
- Go back to the old version of React Native
- Run "npm install -g react-native-git-upgrade"
- Run "react-native-git-upgrade"
See https://facebook.github.io/react-native/docs/upgrading.html
as advised I ran:
$ npm install -g react-native-git-upgrade
$ react-native-git-upgrade
react-native-git-upgrade
command downgraded react
package to another alpha
version and this is what most likely fixed the issue.
[0.47.0] Module JSTimersExecution is not a registered callable module
- https://stackoverflow.com/questions/45594935
emulator window:
Module JSTimersExecution is not a registered callable module (calling callTimers)
solution
rebuild application.
[0.52.1] Error: While resolving module react-native-vector-icons/Octicons
$ react-native start
...
error: bundling failed: Error: While resolving module `react-native-vector-icons/Octicons`, the Haste package `react-native-vector-icons` was found. However the module `Octicons` could not be found within the package. Indeed, none of these files exist:
* `<APP_DIR>/node_modules/react-native/local-cli/core/__fixtures__/files/Octicons(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
* `<APP_DIR>/node_modules/react-native/local-cli/core/__fixtures__/files/Octicons/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
solution
- https://github.com/oblador/react-native-vector-icons/issues/626#issuecomment-357405396
- https://github.com/oblador/react-native-vector-icons/issues/626#issuecomment-358018994
$ rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json
$ react-native start
it looks like this file is recreated after each application build so it makes
sense to add this command to postinstall
script in package.json:
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"eslint": "eslint",
"flow": "flow",
+ "postinstall": "rm -f ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json"
},
[0.52.1] Cannot read property ‘func’ of undefined
error is shown in device system log and emulator window.
the error occurs when evaluating this line:
onPress: React.PropTypes.func.isRequired;
solution
- https://stackoverflow.com/a/47878585/3632318
PropTypes has been moved to a separate package. Accessing React.PropTypes is
no longer supported and will be removed completely in React 16.
import PropTypes
from a separate prop-types
package.
[0.52.1] Cannot read property ‘appVersion’ of undefined
error is shown in device system log and emulator window.
the error occurs when evaluating this line:
// node_modules/react-native-device-info/deviceinfo.js
return RNDeviceInfo.appVersion;
solution
- https://github.com/rebeccahughes/react-native-device-info/issues/52#issuecomment-340212477
- https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking
link react-native-device-info
library manually and rebuild application.
[0.52.1] Invariant Violation: Native component for “BVLinearGradient” does not exist
error in device system log and emulator window.
solution
- https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking
link react-native-linear-gradient
library manually and rebuild application.
[0.52.1] TypeError: Cannot read property ‘isPickerShow’ of undefined
error in device system log and emulator window.
solution
- https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking
link react-native-picker
library manually and rebuild application.
[0.52.1] Cannot read property ‘showImagePicker’ of undefined
error in device system log and emulator window.
solution
- https://github.com/react-community/react-native-image-picker/issues/712
link react-native-image-picker
library manually and rebuild application.
[0.52.1] TypeError: undefined is not an object (evaluating ‘Contacts.getAll’)
error in device system log and emulator window.
solution
link react-native-contacts
library manually and rebuild application.
[0.52.1] production release crashes on startup (in both Android and iOS devices)
solution
- https://github.com/facebook/react-native/issues/16567#issuecomment-340041357
- https://github.com/facebook/react-native/issues/16542
https://github.com/magus/react-native-facebook-login/issues/279:
View.propTypes has been removed in 0.49
replace View.propTypes.style
with ViewPropTypes.style
in all components.
see React Native — Android
(debugging
section) on how to debug similar problems on Android.
[0.59.9] react-native-push-notification: Appears to be a git repo or submodule.
$ npm install
...
npm ERR! path <APP_DIR>/node_modules/react-native-push-notification
npm ERR! code EISGIT
npm ERR! git <APP_DIR>/node_modules/react-native-push-notification: Appears to be a git repo or submodule.
npm ERR! git <APP_DIR>/node_modules/react-native-push-notification
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
solution
- https://github.com/zo0r/react-native-push-notification/issues/1057
$ rm -rf node_modules/*/.git
[0.59.9] Plugin/Preset files are not allowed to export objects, only functions.
$ react-native start
...
Loading dependency graph, done.
error: bundling failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In <APP_DIR>/node_modules/babel-preset-flow/lib/index.js
at createDescriptor (<APP_DIR>/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at <APP_DIR>/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (<APP_DIR>/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (<APP_DIR>/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (<APP_DIR>/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (<APP_DIR>/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at <APP_DIR>/node_modules/@babel/core/lib/config/config-chain.js:283:7
at mergeExtendsChain (<APP_DIR>/node_modules/@babel/core/lib/config/config-chain.js:299:21)
solution
- https://github.com/facebook/flow/issues/7046#issuecomment-443397899
try updating corresponding npm package:
$ npm uninstall babel-preset-flow
$ npm install --save-dev @babel/preset-flow
// babel.config.js
module.exports = {
- presets: ['flow']
+ presets: ['@babel/preset-flow']
};
[0.59.9] The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option, whose value must be a boolean
$ react-native start
...
error: bundling failed: Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.
at validatePlugins (<APP_DIR>/node_modules/@babel/parser/lib/index.js:6093:13)
at getParser (<APP_DIR>/node_modules/@babel/parser/lib/index.js:11286:5)
at parse (<APP_DIR>/node_modules/@babel/parser/lib/index.js:11256:22)
at parser (<APP_DIR>/node_modules/@babel/core/lib/transformation/normalize-file.js:170:34)
at normalizeFile (<APP_DIR>/node_modules/@babel/core/lib/transformation/normalize-file.js:138:11)
at runSync (<APP_DIR>/node_modules/@babel/core/lib/transformation/index.js:44:43)
at transformSync (<APP_DIR>/node_modules/@babel/core/lib/transform.js:43:38)
at Object.transform (<APP_DIR>/node_modules/metro-react-native-babel-transformer/src/index.js:202:20)
solution
- https://react-redux.js.org/introduction/basic-tutorial#connecting-the-components
https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy#babel—7x
This plugin is specifically for Babel 6.x. If you’re using Babel 7, this
plugin is not for you. Babel 7’s @babel/plugin-proposal-decorators officially
supports the same logic that this plugin has, but integrates better with Babel
7’s other plugins.
but after having tried all possible combinations of decoratorsBeforeExport
and
legacy
options I still couldn’t make new decorators work. so:
https://github.com/reduxjs/react-redux/issues/1162#issuecomment-453847059
We do not recommend using connect as a decorator, because the spec is
unstable.
=> it’s easier not to use decorators at all (and remove all related packages),
the more especially as it’s a recommended approach.
[0.59.9] TypeError: undefined is not an object (evaluating ‘props.getItem’)
$ adb logcat
...
06-10 00:18:39.077 10262 10367 E ReactNativeJS: TypeError: undefined is not an object (evaluating 'props.getItem')
06-10 00:18:39.077 10262 10367 E ReactNativeJS:
06-10 00:18:39.077 10262 10367 E ReactNativeJS: This error is located at:
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in FlatList (at YellowBoxList.js:87)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in RCTView (at View.js:45)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in View (at YellowBoxList.js:79)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in YellowBoxList (at YellowBox.js:104)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in YellowBox (at AppContainer.js:93)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in RCTView (at View.js:45)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in View (at AppContainer.js:115)
06-10 00:18:39.077 10262 10367 E ReactNativeJS: in AppContainer (at renderApplication.js:34)
06-10 00:18:39.090 10262 10367 E ReactNativeJS: TypeError: undefined is not an object (evaluating 'props.getItem')
solution
- https://github.com/facebook/react-native/issues/21154#issuecomment-439348692
in this case and in case of many other weird JS errors first try resetting
cache:
$ react-native start --reset-cache
[0.59.9] withRef is removed
emulator window:
Unhandled JS Exception: withRef is removed. To access the wrapped instance,
use a ref on the connected component
solution
- https://react-redux.js.org/api/connect#forwardref-boolean
https://github.com/reduxjs/react-redux/releases/tag/v6.0.0
The withRef option to connect has been replaced with forwardRef. If
{forwardRef : true} has been passed to connect, adding a ref to the connected
wrapper component will actually return the instance of the wrapped component.
https://github.com/reduxjs/react-redux/issues/1291#issuecomment-494188070
Basically, change withRef to forwardRef, and then delete the
.getWrappedInstance() part of componentRef.getWrappedInstance(). componentRef
is your own component now.
say:
// MyComponent.js
export default connect(
mapStateToProps,
null,
null,
- {withRef: true},
+ {forwardRef: true},
)(MyComponent);
usage:
<MyComponent ref={ref => this._myComponentRef = ref} />
// ...
- this._myComponentRef.getWrappedInstance().save();
+ this._myComponentRef.save();
Subscribe to Our Newsletter
Get the latest updates by sharing your email.
Keep Reading
Keep Reading
Get the answer to frequently asked questions by founders for founders!
Download Guide
Let’s create something together!
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
ADDIE WOOTTEN
CEO, SMILINGMIND
We had very close go live timeline and MindBowser team got us live a month before.
Shaz Khan
CEO, BuyNow WorldWide
They were a very responsive team! Extremely easy to communicate and work with!
Kristen M.
Founder & CEO, TotTech
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Chacko Thomas
Co-Founder, TEAM8s
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Dave Dubier
Founder & CEO, MangoMirror
Mindbowser was very helpful with explaining the development process and started quickly on the project.
Hieu Le
Executive Director of Product Development, Innovation Lab
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Alex Gobel
Co-Founder, Vesica
Mindbowser is professional, efficient and thorough.
MacKenzie R
Consultant at XPRIZE
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.
Bennet Gillogly
Co-Founder, Flat Earth
They’re very tech-savvy, yet humble.
Uma Nidmarty
CEO, GS Advisorate, Inc.
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
Katie Taylor
Founder, Child Life On Call
As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush’s leadership for our online digital platform design and development activity.
Radhika Kotwal
Founder of Courtyardly
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
Michael Wright
Chief Executive Officer, SDOH2Health LLC
They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.
David Cain
CEO, thirty2give
We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I’m very happy with the end result. Thank you, Mindbowser team!!
Bart Mendel
Founder, Mindworks
Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.
George Hodulik
CEO, Stealth Startup, Ex-Google
MindBowser is an asset, and frankly, it will be our differentiator. I look forward to working with this group of motivated individuals with a very tight-knit team culture in the coming quarters and years.
Kushal Shah
Co-founder & CEO, Trestle
Reach us out
In this article we are going to fix this error i.e. if you are a react native developer then it’s a big possibility that you might come across this error. Let’s understand a solution that works wonders for this error.
When does this error occur?
This error occurs when we try to run our react-native project on an emulator. For example: with the help of the following command-
npx react-native run-android
This command starts making the processes work but then it fails when tries to launch the emulator from the android studio. Hence it fails in installing the application.
Follow the below steps to Fix this error:
Step 1: Launch Android studio and open your project.
Step 2: Go to files and check if Invalidate Caches/Restart… option is active. If it’s not active then click on Invalidate Caches/Restart… option.
Step 3: Click on Invalidate and Restart.
- After this, Your project is going to restart again on android studio.
- Wait until all the Gradle processes are finished.
Step 4: Clear the cache of your emulator. To clear the cache click on AVD Manager.
Step 5: Click on the down arrow button and click WIPE Data.
That’s all on the android studio side. For most of the users, the problem may not occur after these steps but if the problem is still not resolved then follow the below steps.
- Sometimes the metro bundler causes this problem while we try to run the application on the emulator.
- To resolve that we can start the metro bundler separately.
- As you would already know that npx react-native run-android does the entire task of running your application. But in this case, we are going to run the metro-bundler separately.
Step 6: Write this command in your project directory:
npx react-native start --port 8084 --reset-cache
What does this command do? Well, it is going to reset the cache of the metro bundler and launches the metro bundler at the same time.
Now, We will be running the emulator separately. Open a new cmd(command Prompt) window and write the following command in your project directory.
npx react-native run-android
Note: Close your all previous emulators if they are currently opened.
Now you can see the build is successful this time.