3

I am trying to import my second file into App.js for my project. I am getting the error "The development server returned response error code: 500". Basically saying "Unable to resolve "MainFile" from "App.js".

Why is this happening? I believe it is correct but for some reason this bugfest saying that the file doesn't exist. First code is my App.js file and the second one is the code i am trying to import.

https://gyazo.com/6911c477f9c9e8149370571ca49a0b9f

https://gyazo.com/73f0079bc6a2640877bcc30fa1e609ec

import React from 'react';
import MainFile from './components/MainFile';


export default class App extends React.Component{
  render() {
    return(
      <MainFile />
    );
  }
}

import React from 'react';
import {StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity} from 'react-native';

export default class MainFile extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text>Testing</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {

    },
});
Weird random
  • 53
  • 1
  • 1
  • 9

5 Answers5

1
  1. Double check if file exist at given path or not
  2. If file is not javascript(.js), then mention the extension
  3. Try using double quote when referring to file ( e.g. "./src/..")
  4. If file to import is not .js, then make sure appropriate react library is imported in first import E.g.( import {..., Image } from 'react-native' )
Catalyst
  • 465
  • 6
  • 14
1
  1. delete node_modules folder
  2. edit package json : react-native version to "55.4" or "55.2" and babel-preset-react-native to "4.0.0" ( if your version is different try to use the latest one or downgrade it).
  3. run npm install or yarn install command
  4. you're done

Source : Github

N Fard
  • 1,063
  • 1
  • 15
  • 33
0

In my situation i changed ./MainFile to ./MainFile.js and it start worked. this should work without specifying extension. But something went wrong and he needed it

Kevin Tender
  • 1
0

You need to add an index.js or ts page in the folder from which you are importing components and then write an export statement for component in that index.js page.

add export just like follows then import should work -

export { default as Home } from './Home'

Ishwar Thind
  • 1
0

This answer did not work on my project because I use a much newer release than this one.

I use this type of export in the component:

export default componentName

In that case, I have to import it without curly braces

import componentName from './file' //ok
import { componentName } from './file' //wrong!

Source

iamnomadgg
  • 23
  • 6