We Keep Coding

Defined Component is not accessible in App.js

My component with Home is not accessible in my App.js component.
Home.jsx
import React from 'react'
import "./Home.scss
const Home = () => {
return (
<div>
<div className="home">Home</div>
</div>
)
}
export default Home
This is my App.js Code
import "./pages/home/Home"
function App() {
return (
<div className="App">
<Home/>
</div>
);
}
export default App;
I am facing the error:
[eslint]
src/App.js
Line 8:6: 'Home' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
ERROR in [eslint]
src/App.js
Line 8:6: 'Home' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
webpack compiled with 1 error
I am expecting to access Home component in App.js file

Add reference when you file import like this
import Home from "./pages/home/Home";

In App.js your import should be
import Home from "./pages/home/Home"
Then you can use it

try
import Home from "./pages/home/Home"
if next time you are not using export default, you need to do destructuring
import {moduleA, moduleB} from "./pages/home/Home"
assume you are exporting moduleA and moduleB without export default keyword

How does a chained export work in react without the components in between actually rendering the component?

I understood the point that chaining of components can be done by having functional component in every files and importing the components at every parent level.
eg A imports B imports C
Lets say we have these 3 files App.js, Home.js and HomeContainer.js
where App imports Home imports Homecontainer
App.js
import './App.css';
import HomeContainer from './containers/HomeContainer';
function App() {
return (
<div className="App">
<HomeContainer/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
function HomeContainer(props) {
return (
<div>
<Home/>
</div>
)
}
export default HomeContainer
Home.js
import React from 'react';
function Home(props) {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default Home;
Up until now everything was okay but lets say instead of creating a function component for HomeContainer I exported Home component directly, I see even then it is working.
HomeContainer.js becomes
import Home from "../components/Home";
export default Home
I want to know how exactly this is working, because APP.js is rendering the HomeContainer component but HomeContainer component is not rendering anything like <Home/> but still Home component gets rendered in the APP.js.
I expected App to render first functional component HomeContainer which in turn renders Home component. But even when we don't create a functional component and directly export it, its getting rendered in App.js as Home component when our HomeComponent is not even rendering it using the command <Home/>
How exactly export default in HomeComponent.js is rendering the component Home in parent App.js

When using export default, it doesn't matter what name you give to the imported module.
You are just pointing an identifier to whatever the default export is at the specified path.
Default export
In this example, it does not need to be Home, it can be SomeOtherIdentifier and it will still work.
App.js
import './App.css';
import SomeOtherIdentifier from './containers/HomeContainer';
function App() {
return (
<div className="App">
<SomeOtherIdentifier/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
export default Home
Named export
On the other hand, if you were to use a named export, you would need to import the module with the same name.
App.js
import './App.css';
import { HomeContainer } from './containers/HomeContainer';
function App() {
return (
<div className="App">
<HomeContainer/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
export { HomeContainer }
Or you could use the as keyword to alias the imported module to another name.
App.js
import './App.css';
import { HomeContainer as SomeOtherIdentifier } from './containers/HomeContainer';
function App() {
return (
<div className="App">
<SomeOtherIdentifier/>
</div>
);
}
export default App;
HomeContainer.js
import Home from "../components/Home";
export { HomeContainer }

The HomeComponent.js is rendering the Home because you told it to do so! You're importing and exporting Home in it.
Think of the second HomeComponent.js as a middleman. It imports and exports another component (module). It's a common thing in JS projects.
See these for complete details:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
https://javascript.info/import-export

React JS Attempted import error: './Pathfinder/Pathfinder' does not contain a default export (imported as 'Pathfinder')

I have had a look at a lot of different possible fixes for this but I can't. When I compile the react code I get an error saying that I need to use a default export even though I exported it through the class. I've tried just exporting the part where I call the pathfinder script and that doesn't work.
import React from 'react';
import './App.css';
import Pathfinder from './Pathfinder/Pathfinder';
function App() {
return(
<div className="App">
<Pathfinder></Pathfinder>
</div>
);
}
export default App;
Pathfinder.js
import React, {Component} from 'react';
import Node from './Node/Node';
import './Pathfinder.css';
function app(){
return(
<div>
<p>
</p>
</div>
);
}

There are a lot of questionable things going on here, especially your having an app component and an App component. But as your error is conveying, you're not exporting the app component in Pathfinder.js. Dirty fix:
export default function app() {
// ...
}
Though, at the very least, I would rename the function to Pathfinder.

Exporting default class complains about name

In the MDN docs they use export default class {} and importing it with:
import Whatever from './myFile'
should work.
This is not working in my case, because I export my class like this:
export default class LoginForm extends Component { }
And import it like this:
import LoginForm from './user/LoginForm';
Resulting in the following error:
123:30-39 './components/user/LoginForm' does not contain an export named 'LoginForm'.
When i add export default LoginForm at the end of my LoginForm file it works, but this feels unneccessary.
Why does it complain about a name anyways if it is a default export?
Thanks in advance,
Mike

When i add export default LoginForm at the end of my LoginForm file it works, but this feels unneccessary.
It might seem unneccessary, but this is a convention that you will often see.
I guess you are creating a React Component here, keep in mind, that you often have HoC (higher order components) that need to wrap your component export.
Here is an example:
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
Therefore it makes sense, to put exports at the end of your file.
Note: I could not reproduce your error, when I exported a component like this:
export default class App extends Component { ... }
This worked for me.

Cannot find module whenever I add another component to React JS

I am working through a Udemy Tutorial on React, and something here does not make sense. Whenever I try to add a new component to a .js file, I get an error stating that the component file cannot be found. Here is what I mean:
Originally, I had these 2 files:
my main.js :
console.log('Hello World!');
import React from 'react';
import ReactDOM from 'react-dom';
import Channel from './Channel';
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(
React.createElement(Channel, Object.assign({}, this.props, {name:'Ryan'})),
document.getElementById('My-Channel')
);
});
and my Channel
import React from 'react';
class Channel extends React.Component {
onClick(){
console.log('I was clicked');
}
render(){
return(
<li onClick={this.onClick.bind(this)}>{this.props.name}</li>
)
}
}
export default Channel;
This code actually works, and displays the proper 1 item list.
However, when I try to add another component to my Channel.js file, it breaks. No matter what I put in, it seems that adding another component does not work.
Ex :
import React from 'react';
class Channel extends React.Component {
onClick(){
console.log('I was clicked');
}
render(){
return(
<li onClick={this.onClick.bind(this)}>{this.props.name}</li>
)
}
}
class ChannelList extends React.Component{
render(){
return (
<ul>
<Channel name='Hardware Support'>
</ul>
)
}
}
export default Channel;
Do I have to create a new file every time I want to create a component? I can't imagine that being the case, so what would you suggest I do?
Here is the Exact Error I am getting
Even if I add a simple dictionary to the end of the file, I get the same error. Its as if the only thing in this Channel.js file can be the channel component
Thank you in advance for your help!

Not being able to find a module is almost always a sign of a syntax error (assuming the files are in the right location). In your case, it's never hitting export because the following is a syntax error:
class ChannelList extends React.Component{
render(){
return (
<ul>
<Channel name='Hardware Support'>
</ul>
)
}
}
You're missing the closing tag!
Change <Channel name='Hardware Support'> to <Channel name='Hardware Support' />
Also it looks as though you should be doing:
export default ChannelList
and in your main file:
import ChannelList from './Channel'
ReactDOM.render(
<ChannelList />,
document.getElementById('My-Channel')
),

Credit to #jamesemanon for part of the solution, and #azium for the other.
So, of the problems that I had:
make sure to close your tags
for some reason, I had to use export default instead of just
export
I had to import ChannelList into my main.js file : import
ChannelList from './Channel';
Thank you both for your help, I hope some others can benefit from this in the future as well