I am getting this error:
builded with expo
Trouble in import containers to main file app.js
SignIn code
import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';
export default class SignIn extends Component {
render() {
return (
<View>
<Text>
</Text>
</View>
);
}
}
App.js code
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
import SignIn from './app/containers';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>
Ma App
</Text>
<SignIn />
</View>
);
}
}
if I remove signIn it's work!
Error on screen
Most likely the path to your SignIn component is incorrect, or you are missing the index.js export. You can test this theory by console logging the component SignIn; you will find it prints undefined.
The reason is you are attempting to import a default module SignIn from path ./app/containers. Assuming that is a valid path, you are attempting to import the default export from ./app/containers/index.js. This is unlikely to be correct as the index.js (AKA barrel) purpose is to export multiple public modules from an app directory.
Assuming your index.js is defined correctly, and includes the following or similar.
export { default as SignIn } from './SignIn.js';
Then you should update your import of SignIn to import a named module instead of the default module; as follows.
import { SignIn} from './app/containers';
Alternatively, you could import the default module direct from the component's source file.
import SignIn from './app/containers/SignIn';
Hope this helps!
Related
I am using react-native to build an app. The app has 2 screens: HomeScreen and Search screen. The file explorer cant find the module for Search but the same path for HomeScreen is working. Also I am using android if it helps.
My App.js includes:
import React from 'react';
import type { Node } from 'react';
import { StatusBar } from 'react-native';
import Search from './src/screens/Search/index';
const App: () => Node = () => {
return (
<>
<StatusBar barStyle='dark-content' />
<Search />
</>
);
};
export default App;
Search/index.js includes
import React from "react";
import { View, Text } from "react-native-vector-icons";
const Search = (props) => {
return (
<View>
<Text>Hi</Text>
</View>
);
};
export default Search;
Error:
However if I replace Search by HomeScreen, the app works. Could you please help my figure out what I am doing wrong. I am using the same code and same directory search style in both my index.js files. However, I made HomeScreen/index.js before Search/index.js.
Here is my HomeScreen/index.js
import React from "react";
import { View, Text } from "react-native";
import HomeMap from '../../components/HomeScreenMap';
const HomeScreen = (props) => {
return (
<View>
<HomeMap />
</View>
);
};
export default HomeScreen;
Here is my directory:
MEDLIFE
>__tests__
>.vscode
>android
>ios
>node_modules
>src
>components
>screens
>HomeScreen
>index.js
>Search
>index.js
.buckconfig
.editorconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
app.json
babel.config.js
index.js
metro.config.js
package.json
yarn.lock
Change this:
import { View, Text } from "react-native-vector-icons";
To this:
import { View, Text } from "react-native";
I have just started react-native and trying to create first Hello, world screen but I'm getting below error
ReactNativeJS: ReferenceError: Can't find variable: View
This error is located at:
in Unknown
in RCTView
in RCTView
in c
below is my code for App.js
import React, {Fragment,Component} from 'react';
import HelloWorldApp from './components/HelloWorldApp';
import { BrowserRouter as Router, Route } from "react-router-dom"
const App = () => {
return (
<Router>
<div>
<Route exact path='/' component={HelloWorldApp} />
</div>
</Router>
);
};
export default App;
Below is my code for HelloWorldApp.js
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
I have already import this import {Text, View} from 'react-native'; but still I'm getting error Can't find variable: View
Below are some links that i have already check but it didn't help me to solve my issue
Can't find Variable : "View"
Can't find variable: React
ReferenceError: Can't Find Variable
UPDATE
I have tried this Delete and re-install the node modules
Now I'm getting this error
ReactNativeJS: Error: Invariant failed
This error is located at:
in l
in f
in RCTView
in RCTView
in c
can anybody tell me what I'm missing
Can anybody help me to solve this issue
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
there is no problem in your code.you should only try react-native init example again and enjoy on another directory
Might be some issues while loading.
Do one thing :
Close the packager and restart the packager along with closing and deleting the
app and reinstalling it.
OR
Delete and re-install the node modules
App.js
import React, {Fragment,Component} from 'react';
import HelloWorldApp from './components/HelloWorldApp';
import { BrowserRouter as Router, Route } from "react-router-dom"
const App = () => {
return (
<Router>
<Route exact path='/' component={HelloWorldApp} />
</Router>
);
};
export default App;
import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class App extends React.Component {
render(){
return (
Hello world!!
)
}
}
1.Create new react native project
2.Delete App.js code
3.And paste this code in App.js
4.run.
import React, { Component } from 'react';
import {View,Text} from 'react-native';
export default class App extends Component {
render(){
return(
<View>
<Text>Hello world</Text>
</View>
)
}
}
Create new project
Delete App.js code
and paste this code in App.js
run
I started a new project with react-native. I created a component called Home.jsx in app/components/home/. It looks like this:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
} from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>This is the home component!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default Home;
And my index.js (in the root) file looks like this:
import {AppRegistry} from 'react-native';
import Home from './app/components/home/Home';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Home);
When I try to load up the app in the the emulator, I get this error message:
error: bundling failed: Error: Unable to resolve module
`./app/components/home/Home` from
`/Users/[my_name]/repos/[repo_name]/index.js`:
The module `./app/components/home/Home` could not be found from
`/Users/[my_name]/repos/[repo_name]/index.js`. Indeed, none of these
files exist:
What am I doing wrong?
I got it working by not using a folder called app and instead using src. I'm not entirely sure why this solved the issue but there we go!
I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.
My 'src' folder structure is like this:
scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES
In App.js I have this:
import React, { Component } from 'react';
import ComponentA from './components/ComponentA';
class App extends Component {
render() {
return (
<div className="App">
<ComponentA />
</div>
);
}
}
export default App;
In ComponentA I have this:
import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';
class ComponentA extends Component {
render() {
return (
<div className="componentAStyle">
<ComponentB />
</div>
);
}
}
export default ComponentA;
In ComponentB I have this:
import React, { Component } from 'react';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
And if I remove the css import there is another error message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
How can I import another component from another component and its respective css?
Thanks.
You need to make the paths you are importing are relative to the current location of the file doing the import.
The correct imports would be
Component A
import React, { Component } from 'react';
import '../styles/ComponentA.css';
import ComponentB from './ComponentB';
You can see this working at https://glitch.com/edit/#!/trashy-unicorn.
(Click on Show Live in top left hand corner.)
Currently what is happening with your error is
import ComponentB from './components/ComponentB';
is is looking in the path
src/components/components/ComponentB
which does not exist and so gives you an error. Same thing is happening with your styles.
Hope this helps.
I'm teaching myself React-Native and I came across this strange roadblock. Inside my App.js I'm trying to export a class and then use another file within my App.js which is inside the somePage() function. where I'm calling <Header/> in an attempt for that text to appear on my physical device upon hitting refresh.
It displays <Login/> perfectly, but not what's within the somePage() function. My question is, why?
(I'm using Expo by the way, instead of having an index.ios.js file it's an App.js file that still supports cross platform development).
Here's my App.js file:
import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import Login from './components/Login';
import Header from './components/Header';
export default class Project extends Component {
render() {
return (
<Login/>
);
}
}
const somePage = () => (
<Header/>
);
AppRegistry.registerComponent('someProject', () => Project);
AppRegistry.registerComponent('someProject', () => somePage);
Here's my Header.js file:
import React from 'react';
import {Text} from 'react-native';
const Header = () => {
return <Text>Testing this out</Text>
}
export default Header;
The concept of react is that a parent component renders child components. You only need to register once because the root component is the parent component of all other components. Any other child or grandchild components you want to render must be descendants of the root component. As a side note, you don't need to have export default in front of the Project component, because you aren't exporting it anywhere: you are registering it below.
To fix your app, you need to place the header component inside the registered root component:
import React, { Component } from 'react';
import {AppRegistry, View } from 'react-native';
import Login from './components/Login';
import Header from './components/Header';
class Project extends Component {
render() {
return (
<View>
<Header/>
<Login/>
</View>
);
}
}
AppRegistry.registerComponent('someProject', () => Project);