I have this error when i import my component
Module not found: Can't resolve '../src/components/Menu' in '/Users/userName/Documents/folder/repository/Project/src/pages/Home'
src
components
Menu
Menu.css
Menu.js
pages
Home.css
Home.js
Menu.js
import React, { Component } from 'react';
import './Menu.css';
class Menu extends Component {
render() {
return (
<div className="menu">
<h1>Je suis un Menu</h1>
</div>
);
}
}
export default Menu;
Home.js
import React, { Component } from 'react';
import './Home.css';
import Menu from './../components/Menu';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
msg: 'Hello from the state of Home'
}
}
render() {
return (
<div className="home">
<h1 className="text">Welcome to the Home Page</h1>
<p>{this.state.msg}</p>
<Menu/>
</div>
);
}
}
export default Home;
You need to import from one level deeper:
import Menu from './../components/Menu/Menu';
You have a folder called Menu and the file you want is inside called Menu.js.
That's because '../src/components/Menu' doesn't point to your file.
Either use the path
'../src/components/Menu/Menu'
Or, if you want to use your original path, rename your Menu.js file to index.js.
In my experience the latter tends to be more popular due to it's inclusion in the hugely useful Airbnb JSX style guide.
Related
// -----App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import News from './components/News';
import NewsItem from './components/NewsItem';
function App() {
return (
<div>
<Navbar />
<News />
</div>
);
}
export default App;
// ----- News.js
import React, { Component } from 'react'
import NewsItem from './NewsItem';
export class News extends Component {
render() {
return (
<div>
<NewsItem />
</div>
)
}
}
export default News
//----- NewsItem.js
import React, { Component } from 'react'
export class NewsItem extends Component {
render() {
return (
<div>
NewItem component
</div>
)
}
}
export default NewsItem
I am new to react and trying to learn the basics.I tried to resolve the issue but couldn't find out the actual cause. I tried to search same issue over the internet but can't find any. All though the error msg is same but situation is different.
As you can see the NewsItem.js component is passed to News.js. Is it ok to pass a class component to another class component as a return type?
I'm getting the error as shown in img.
enter image description here
Try to remove export before defining the class
class News extends Component ...
class NewsItem extends Component ...
You are already default exporting it at the bottom
Trying to split some HTML chunks by dividing the HTML in smaller pieces, located in the components folder. (I know, HTML is not really html, it is JSX).
The outcome I am trying to achieve is to have the imported component [Navigation] to render its content.
I do understand that there might be tools for the code splitting.
Question: Why doesnt the code render the div navigation content?
Navigation.js
import React from 'react';
export default function Navigation() {
return (
<div className="navigation">
<ul>
<li>
Google
</li>
</ul>
</div>
);
}
App.js
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
Navigation();
return (
<div>
Hello from component - Class!
</div>
);
}
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Your component is not rendering because u call de function outside the return statement.
For a component render, you need to return the component inside the
render function;
Example:
render () {
return <Component/>
}
When u call this:
render() {
Navigation(); // see, the navigation is outside the return statemente
return (
<div>
<p>Hello from component - Class!</P>
</div>
)
}
try this:
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
return (
<div>
<Navigation/>
<p>Hello from component - Class!</P>
</div>
)
}
}
export default App;
I have two components. I want to call 2nd component into the first component component
//first component
import React, { Component } from "react";
class Admin extends Component {
render() {
return (
<div>
<button>admin login</button>
</div>
);
}
}
export default Admin;
...
//2nd component
import React, { Component } from "react";
import Admin from "./components/Admin";
class Main extends Component {
render() {
return (
<div>
<p>main page</p>
<Admin />
</div>
);
}
}
export default Main;
if you want the second component in the first component just import it and place it in the div
import React, { Component } from "react";
import Main from "./components/Main"
class Admin extends Component {
render() {
return (
<div>
<button>admin login</button>
<Main/>
</div>
);
}
}
export default Admin;
But doing that you will have to take Admin out of the Main component:
import React, { Component } from "react";
class Main extends Component {
render() {
return (
<div>
<p>main page</p>
</div>
);
}
}
export default Main;
Not sure if I am understanding this correctly, but since you've loaded the 1st Component () into the 2nd component already, I would expect that trying to call the second one into the first will cause an error due to an infinite import issue.
If you only want the second component in the first, but not first in the second, then the answer by Brad Ball should work.
Taking a look at the code you're presenting to us, we can see you're invoking Admin as a Child Component of Main.
#Brad Ball gave you the inverse, invoking Main as a Child Component of Admin.
If you want to compose them one needs to be the parent, the other the child.
If you want them to be siblings you need a third component to be the parent of both.
Can you explain better what you want to do?
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);