I can't import my module, it keeps giving me the same error, I have looked into what I may have done wrong but I dont see it. Everything works for my other components (They are all in the same folder "./[Folder]") except this component and it's being passed the exact same way.
Module Not Found
ManageTreeComponent.jsx
import React from "./react";
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems;
LoginApp.jsx
import DisplayListItems from "./ManageTreeComponent.jsx";
function Login() {
return <div className="container">
<DisplayListItems />
</div>
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
Your import react statement is wrong in ManageTreeComponent.jsx, make sure your import looks like this:
import React from "react"; // without period and /
Rather then using .jsx file use .js file
ManageTreeComponent.js
import React from "react"; // need to import like this
function DisplayListItems(){
return(
<h1>Hello</h1>
);
}
export default DisplayListItems
LoginApp.js
import DisplayListItems from "./ManageTreeComponent";
function Login() {
return (
<div className="container">
<DisplayListItems />
</div>
);
}
export default Login;
index.js
import Login from "./components/Login/LoginApp";
ReactDOM.render(<div>
<Login />
</div>, document.getElementById("root"));
Related
I'm using chakra-ui, along with react-split-pane.
If I use one or the other, it'll work well. If I use them together, the page is blank with no console error message. Here's three examples.
Using them together:
CodeSandbox: https://codesandbox.io/s/patient-worker-x65r5?file=/src/index.js
// Doesn't work, page is blank w/ no error message.
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "#chakra-ui/react"
import SplitPane from "react-split-pane";
export function Test() {
return(
<ChakraProvider>
<SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
<div>123</div>
<div>456</div>
</SplitPane>
</ChakraProvider>
)
}
ReactDOM.render(
<Test />,
document.getElementById("root")
);
Using just react-split-pane:
// Works perfectly
export function Test() {
return(
<SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
<div>123</div>
<div>456</div>
</SplitPane>
)
}
Using just chakra-ui:
// Works perfectly
export function Test() {
return(
<ChakraProvider>
<div>123</div>
<div>456</div>
</ChakraProvider>
)
}
Any ideas as to what could be happening here?
I'm using React+Typescript with webpack.
I'm having issues that I've never experienced before. Recently, I've started a new project with create-react-app however, I'm shown an error:
./src/App.js
Module not found: Can't resolve './pages/' in '
Folder Structure
I've tried different file paths but in my previous projects this is the path that has worked but for some reason, it doesn't work anymore.
App.js
import React from 'react';
import Home from './pages'
function App() {
return (
<div>
<h1>Hello</h1>
<Home />
</div>
);
}
export default App;
Home.js
import React from 'react'
export const Home = () => {
return (
<div>
<h1>Hello</h1>
</div>
)
}
If someone could help that would be great! I've been trying to solve this for the past 3hrs and nothing has come from it! Thanks in advance!
The reason you're code is failing is because the pages folder doesn't have an index.js file. If you want to import the Home page component directly from the pages folder, without using import Home from "./pages/home" syntax, you'll have to create an index.js file, inside the pages directory, that exports the home component, like this:
"./pages/index.js"
...
export * from './home';
export * from './someOtherPage';
....
Then, in App.js, you can import the Home component like this:
...
import { Home, SomeOtherComponent } from './pages';
...
Try './pages/Home' instead of './pages'
What you've imported as ./pages is actually the folder when you need to import the file itself. So it should be something like this:
import React from 'react';
import Home from './pages/Home.js'
function App() {
return (
<div>
<h1>Hello</h1>
<Home />
</div>
);
}
export default App;
I'm a newbie here so apologies for what might be a very elemental question.
I am trying to fiddle with different ways to import components in React by following a tutorial but I can't seem to make it work. There must be a simple tweak that I am sorely missing.
I am trying to create export a component (Person2) to another JS (App)
Person2.js
import React from 'react'
import ReactDOM from 'react-dom'
function Person2(){
return (
<div>
<h1>Millie</h1>
<p>PERSON 2</p>
</div>
);
}
/*
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('#p2')
);
*/
//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));
App.js
import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render
function App() {
return (
<div className="App">
<header className="App-header">
<p>this is the header</p>
</header>
<body>
<div class="w3-row">
<Person name="Max" age="28"/>
<Person name="Ann" age="18"/>
<div id = "p2"></div>
</div>
</body>
</div>
);
}
export default App;
Any idea where I went wrong?
I'm getting an error "Error: Target container is not a DOM element."
ReactDOM.render is usually used only for rendering your root component, I don't think you should use it in that case. With that said, the problem is the order the code is executed. You try to render your Person2 component in a node that hasn't been yet rendered, thus you get that error
Unless you have a very strange use case, you should be using export not ReactDOM.render for this example.
In Person2, change to this:
//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;
Then to use it, in App change to this:
import Person2 from './Person2'; // for default export
...
<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this
If for whatever reason your app requires the use of ReactDOM.render here, I'd add a check for safety to make sure the element exists first.
if (!!document.getElementById('p2')) {
ReactDOM.render(<Person2/>, document.getElementById('p2'));
}
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}
eslinting with airbnb
import React from 'react';
import TopBar from './topBar';
import Content from './content';
class App extends React.Component {
render() {
return (
<div className="app">
<TopBar />
<Content />
</div>
);
}
}
export default App;
gives the error
5:1 error Component should be written as a pure function react/prefer-stateless-function
I have tried
function render(){}
and
render: function() {}
but didn't succeed
Using the docs from https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, your code sample would be converted to:
import React from 'react';
import TopBar from './topBar';
import Content from './content';
function App (props) {
return (
<div className="app">
<TopBar />
<Content />
</div>
);
}
export default App;
Note that this updated code sample will break some other airbnb eslinting rules but those should be self-explanatory. Just posting this as a template to follow. The docs on this subject are very direct so make sure you give those a good review.