Getting an error when loading component in React Native

react error message component
react api error handling
react throw error
react hooks error handling
componentdidcatch hooks
react error handling
react native error handling
next js error boundary

I am getting an error when trying to load my component:

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module components/Items from /Users/vemundeldegard/AwesomeProject/app/screens/Home.js: Module components/Items does not exist in the Haste module map

This might be related to To resolve try the following: 1. Clear watchman watches: watchman watch-del-all. 2. Delete the node_modules folder: rm -rf node_modules && npm install. 3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache. 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*. (null))

Trying to load my component in screen which is called screens/home.js, which is then loaded in my app.js.

Added this to the top of the /screens/home.js file:

import Items from 'components/Items';

And calling it in the render like this <Items />

components/items.js looks like this:

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

const Items = () => {
  return (
    <View>This is now an item</View>
export default Items;

Why can't I load a component? Tried doing what the error says.

Try doing import Items from '../components/items', actually your file is named items (without capital i) instead of Items.

Error Boundaries – React, Error boundaries are React components that catch JavaScript errors We also encourage you to use JS error reporting services (or build your own) so that you  Browse other questions tagged reactjs react-native or ask your own question. The Overflow Blog Podcast: A chat with MongoDB’s CTO, Eliot Horowitz

If the file location is right as you mentioned, import Items from '../components/items'; should be right. But the important thing is after you add new files such as js or image files, you need to restart the node modules.

Handling Rendering with Loading, Empty, Error States for React , In react development we often face a problem of dealing with different states for some should be located in the component.js instead of in the container.js for higher cohesion. Provider provides global Loading, Empty, Error Components and uses A button that says 'Get it on, Google Play', and if clicked. Description Used a component to load a webpage for an iOS app. but upon propagating it I am getting: Reproduction Here is the code for it: import React, { Component, } from 'react'; import { StyleSheet, View, WebView, } from 'react-nativ


import Items from '../components/Items';

Handling different type of errors in React Native, // imports class AppView extends Component { componentWillReceiveProps(​nextProps) { const { loading } = this.props; const { errors, loaded } =  PR addresses this by changing the constants to `React.Component` class exports, decorated with the `getNode()` method * migrate to AndroidX Migrated source code to use AndroidX, and Example to use React Native 0.60.5. Also removed unnecessary files like flow and buck configurations, Gradle wrapper in android, etc

Unable to load local file on Android · Issue #656 · react-native , but on Android we get an error: Encountered an error loading page: import React, { Component } from 'react'; import { WebView } from  Displays a circular loading indicator. Inherits View Props. Whether to show the indicator (true, the default) or hide it (false). The foreground color of the spinner (default is gray on iOS and dark cyan on Android). Whether the indicator should hide when not animating (true by default). Size of the indicator (default is 'small').

Error on load image on React-native: Unexpected character · Issue , Error on load image on React-native: Unexpected character #6691 image on a component on React-native, but I don't know why this error happens. Get the same error but only when overwriting an image already loaded  But since the introduction of React's Hooks API, you can add state and more to function components. Hooks were introduced in React Native 0.58., and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle

React and React Native: A complete hands-on guide to modern web , There are two helper components being used here: ErrorMessage and LoadingMessage. They're used to format the error and the loading states, respectively. In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript.

  • Is items a custom component? if so then it's probably './component/Items'
  • Show the folder/file structure of your project, please.
  • Added @ChrisCousins
  • Try: import Items from '../components/Items'
  • You probably meant to write import Items from '../components/Items'. You have to go one directory up from screens to app before the relative path components/Items points to the correct file.
  • Not working. Then I get: Failed to load bundle(localhost:8081/…) with error:(Unable to resolve module ./components/Items from /Users/vemundeldegard/AwesomeProject/app/screens/Home.js: The module ./components/Items could not be found from /Users/vemundeldegard/AwesomeProject/app/screens/Home.js. Indeed, none of these files exist