I am trying to do simple routing with react-native but I am getting some error like this Failed building Javascript bundle

Question

I created one react native project and started Routing. In a project I have Pages folder, In this folder I have a Home folder in Home folder I have Home. j's, and I have another folder in Pages that is About in that I have About.js. These all are pages.

I have another folder that is Components, In that I have Navbar folder in that I have Navbar.js

I Imported this Home to Navbar.js And I have Imported Navbar to App.js. Now I am getting error like this, Unable to resolve "./Pages/Home/Home" from "Components/Navbar/Navbar.js" Failed building JavaScript bundle.

In the Pages folder I have a Home folder In that I have Home.js

This Home.js

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

export default class Home extends Component {
    render() {
        return (
            <View>
                <Text>We have friends</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

In the Components Folder I have a Navbar folder in that I have Navbar.js

This is Navbar.js

import { createStackNavigator } from 'react-navigation';
import Home from './Pages/Home/Home';

const Navbar = createStackNavigator({
    Home: { screen: Home },
})

export default Navbar

This is App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Navbar from './Components/Navbar/Navbar'

export default function App() {
  return (
    <Navbar></Navbar>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I want to resolve the error what I am facing. If you think still if I am not clear with my doubt or If you don't understand my question please put a comment.

This seems similar to this: https://stackoverflow.com/questions/58080348/react-native-unable-to-resolve-module-indeed-none-of-these-files-exist/58080433?noredirect=1#comment102555496_58080433 — Mike M, Oct 01 '19 at 18:19
Hi Mike M, I have gone through your link, I tried to resolve my error but I couldn't so help me to resolve this errror. — Vamsi, Oct 02 '19 at 04:02

score 0 · Answer 1 · answered Oct 01 '19 at 19:02

0

please try something like .../Pages/Home/Home

answered Oct 01 '19 at 19:02

Vamsi Calpakkam

130
10

Hi Vamsi, I tried this .../Pages/Home/Home but its not working – Vamsi Oct 01 '19 at 19:13

score 0 · Answer 2 · answered Oct 01 '19 at 23:32

0

I think you should install react-navigation-stack and import createStackNavigator from there, like:

import { createStackNavigator } from 'react-navigation-stack';

Namely it has changed the way to import it. Check the docs

answered Oct 01 '19 at 23:32

Fotios Tsakiris

1,310
1
18
24

Hi Fotis Tsakiris, I done what you said but it is showing same error. – Vamsi Oct 02 '19 at 03:18

I am trying to do simple routing with react-native but I am getting some error like this Failed building Javascript bundle

2 Answers2