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: {
},
});
Double check if file exist at given path or not
If file is not javascript(.js), then mention the extension
Try using double quote when referring to file ( e.g. "./src/..")
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' )
delete node_modules folder
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).
run npm install or yarn install command
you're done
Source : Github
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
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'
Related
I already tried a well-known resolution of this problem--"change every file which imports from .env". It worked first few times, but now it has no effect.
I'd appreciate it if somebody shed some lights on my questions.
Why the solution stopped functioning?
Why it worked first few times?
Is there any other way to solve this problem?
.env
REACT_APP_API_BASE_URL=http://10.0.2.2:3000/v8/api
constants.js
import {REACT_APP_API_BASE_URL} from "#env"
export const apiBaseUrl = REACT_APP_API_BASE_URL
//I added this sentence so that my app recognizes changes in .env
App.js
import React,{useEffect} from 'react';
import {
Text,
View,
Alert
} from 'react-native';
import { apiBaseUrl } from './constants.js';
const App = () => {
useEffect(()=>{
Alert.alert(apiBaseUrl)
//The above alert should display http://10.0.2.2:3000/v8/api, but it displays the previous value of REACT_APP_API_BASE_URL
},[])
return (
<View>
<Text>Hey</Text>
</View>
);
};
export default App
I tried following solutions, but it didn't work;
restart metoro
rebuild project by npx react-native run-android
wipe data in ADV
I've moved my code of a custom React Native component to it's own file such as this:
import React from 'react';
import { StyleSheet, Text, View } from "react-native";
export default class MyButton extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Text style={{fontSize: 20, color: "#008000"}}>Foo Bar</Text>
);
};
};
In App.js I can refer to that file that contains that code. The framework does not complain:
import { MyButton } from "./MyButton";
But as soon as I include MyButton in the App rendering function I receive the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
The rest of the error message is completely useless.
I did some searches on the web to learn what could have caused that error. But none of all hints I found seemed to be related to my case here. For example I use import React from 'react'; which is advised by some answers even here on stack overflow, but still this doesn't work. (See: Custom component undefined in React Native)
If I move the code to App.js everything works fine. If I move it to another file things don't work. What do I need to change in that file in order to successfully have a component in that file? And include that in similar way as those native components in my App.js?
Thank you for your help!
Your import statement is incorrect.
import { MyButton } from "./MyButton";
This import statement imports a named export called MyButton from the ./MyButton module. However, in your MyButton file you are default exporting the MyButton component. What you want to do is:
import MyButton from "./MyButton";
which imports whatever is exported by default from the module, in this case the MyButton component.
I already have a react-native project which I cloned and running successfully.
I added a new file to the project and tried to link that page using a button from another page with, this.props.navigation.navigate('DisplayHomeScreen');
I couldn't link the 'DisplayHomeScreen.js'.
But when I link a page which was already there, the navigate function is working fine.
Here is the simple code of DisplayHomeScreen.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class DisplayHomeScreen extends Component {
render() {
return (
<View>
<Text>Display Home</Text>
</View>
);
}
}
export default DisplayHomeScreen;
As your code snippet is insufficient to identify the problem.can you please share your navigation stack.Well at spot I can/ recommend doing.
yarn install (if you are using yarn as a package manager)
react-native link
close metro bundle
restart app
I am a newbie in react-native and I'm trying to use the react-native-ui-kitten library. The problem is that the documentation is not really helpful.
I have I have installed ui-kitten and the theme as indicated with the command: npm i react-native-ui-kitten #eva-design/eva
The documentation asks to configure the application root which I consider to be the App.js file unless I'm wrong.
So i changed the App.js generated code to this:
import React from 'react';
import {
mapping,
theme,
} from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
export default class App extends React.Component {
public render(): React.ReactNode {
return (
<ApplicationProvider
mapping={mapping}
theme={theme}>
<Application/>
</ApplicationProvider>
);
}
}
Unfortunetely it's not working.
Has anyone recently used ui-kitten library ?
What does the documentation mean by Application Root and how to set up a simple react-native project to use react-native-ui-kitten?
And yes I actually checked the documentation but maybe there is something I am not doing right.
I ran into the same problem.
I discovered that the creators of this UI kit use in fact in their code examples Typescript.
So you need to recreate your Reactnative project using a Typescript template, then rename accordingly the App.js into App.tsx
Any other components need to be renamed with the extension .tsx.
Make sure you read about Typescript:
https://www.typescriptlang.org
Here it is how you can recreate your project with Typescript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
All the best,
I am also a beginner in react-native and it seems we kinda differ in implementing the code. I am not sure if this would help but this is the way I implement your code:
import * as React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Application/>
</ApplicationProvider>
);
export default App;
You could try it and let me know if this suits you. Good luck!
I am hitting this error when i am trying to define my own custom components.
// /common/MyAppText.js
import React, {Component} from 'react';
import {
Text,
View,
} from 'ReactNative';
class MyAppText extends Component {
render(){
return (
<View>
<Text>hello</Text>
</View>
)
}
}
export default MyAppText
On the other app, i tried to import it and use it by
import MyAppText from './common/MyAppText'
class Home extends Component {
render(){
return (
<View>
<MyAppText />
</View>
)
}
}
But i hit the error "expected a string or a class/function but got: undefined, please check render method of 'MyAppText'. Anyone can see what is wrong with the export syntax?
If i defined everything in the same document then it works, so it is something with the export that i couldn't figure out.
Your own export/import looks fine. Not sure if this is the issue, but the line
import {..} from 'ReactNative';
Should be:
import {..} from 'react-native';
You might expect that to crash with a different error (module not found), but since this internal React Native file exports a globally available module "ReactNative" via Haste, your import ends up picking that file. Because that file doesn't export properties View and Text, the code compiles fine, but ends up with undefined variables.
Edit for more context:
The React Native bundler (called Metro) uses Facebook's own module system (called Haste), which allows anybody to decorate a file with a comment #providesModule Name, and then import it from globally anywhere with just import ... from 'Name';
One of the internal renderer modules declares #providesModule ReactNative. So when you've imported from 'ReactNative', you got that module instead of a build error.