vemund
vemund

Reputation: 1807

Getting an error when loading component in React Native

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 https://github.com/facebook/react-native/issues/4968 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 {
  StyleSheet,
  Text,
  View
} 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.

enter image description here

Upvotes: 1

Views: 1434

Answers (3)

crystal_17
crystal_17

Reputation: 737

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.

Upvotes: 1

Jose Vf
Jose Vf

Reputation: 1533

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

Upvotes: 1

Marius
Marius

Reputation: 376

Try:

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

Upvotes: -1

Related Questions