I am trying to import Header Component in App.js
but it's giving error.
import './App.css';
import Headers from './Components/Header';
function App() {
return (
<div>
</Headers>
</div>
);
}
export default App;
Header.js
import React from "react";
export default function Headers(){
return (
<div>
Header Demo
</div>
);
}
Header.js file exist in src/Components
Compiled with problems:X
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/sanad/Documents/newapp/src/App.js: Expected corresponding JSX closing tag for . (8:4)
Your problem has nothing to do with importing the module.
Read the error message carefully:
SyntaxError: /home/sanad/Documents/newapp/src/App.js: Expected corresponding JSX closing tag for <div>.
This is because you have a closing tag (</Headers>) but the next element that needs to be closed in <div>.
Your problem is that you need to open the <Headers> element first.
<div>
<Headers></Headers>
</div>
import React from "react";
add this to App.js
Related
It cannot find my navbar.js file for some reason, but its there!? Any help is appreciated
Just keeps showing -
Compiled with problems:X
ERROR in ./src/App.js 5:0-41
Module not found: Error: Can't resolve './components/navbar' in 'C:\Users\ekrus\OneDrive\Desktop\honeycomb\honeycomb\client\src'
The navbar.js file:
import React from 'React';
import ReactDOM from 'react-dom'
export default class Navbar extends React.Component {
render() {
return (
<div>
<ul className="nav">
<li className="nav-item slam-left">Brand</li>
<li className="nav-item">Home</li>
<li className="nav-item">About</li>
<li className="nav-item"><a className="contact" href="#">Contact</a></li>
</ul>
</div>
);
}
}
My App.js file:
import './App.css';
import Navbar from './components/navbar';
function App() {
return (
<Navbar />
);
}
export default App;
In your navbar.js you are exporting your component as a named export, and in your App.js you are trying to do a default import, which doesn't exist.
change your navbar component to start with export default class Navbar...
You can read more about named and default exports here
and here
Edit: After looking at the directory structure again, seems like you have the path of the navbar file off. The Navbar is in components/navbar/navbar.
so you should change your import statement to
import Navbar from "./componenets/navbar/navbar";
Edit 2:
I also noticed that in App.js you imported react from React, and it needs to be react, with a lowercase R.
change it to:
import React from 'react';
This is my first experience with Next JS and I am trying to bootstrap the Next JS app, which has been going on well until now that I have to use bootstrap's Javascript for a carousel.
So first, I added the bootstrap js to the script of the next js page (pages/gallery/[id].js) manually like this:
import Script from "next/script";
import Layout from "../../layouts/interface";
import SlidingComponent from "../../components/slide";
export default function GalleryPage() {
const router = useRouter();
const {id} = router.query;
return (
<Layout>
<SlidingComponent />
<Script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" />
</Layout>
)
}
This works initially but as soon as the second slide image comes in, next js throws the following error:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'classList')
Call Stack
st._setActiveIndicatorElement
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:13913)
st._slide
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:15057)
st.next
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:10814)
st.nextWhenVisible
https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js (6:10883
I found another way to correct the error online. It says I should import the bootstrap js in my pages/_app.js like this:
import 'bootstrap/dist/css/bootstrap.css'
import '../styles/globals.css'
import {useEffect} from "react";
//this is what the solution says:
useEffect(() => {
import("bootstrap/dist/js/bootstrap");
}, []);
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
But this too gives me the following error:
https://nextjs.org/docs/messages/module-not-found
wait - compiling...
error - ./node_modules/bootstrap/dist/js/bootstrap.js:7:0
Module not found: Can't resolve '#popperjs/core'
Import trace for requested module:
./pages/_app.js
Now I don't even know what to do, can anybody please help me?
Use Approach 2, for the popperjs error follow these steps
npm i #popperjs/core
see here How to fix this error : " Module not found :can't resolve popper.js "
I'm trying to print Hello World on the localhost using React js.
But the browser page is always blank whenever I run the code.
***App.js***
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import greet from './components/Greet'
class App extends Component{
render() {
return (
<div className="App">
<Greet></Greet>
</div>
);
}
}
export default App;
***Greet.js***
import React from 'react'
/* Greet(){
return <h1>Hello, Neha</h1>
}*/
const Greet = () =><h1>Hello, Neha</h1>
export default Greet;
I have added the Greet component in src folder i.e., src folder -> components folder -> Greet.js
The error that I'm receiving on the terminal is :-
Failed to compile.
./src/App.js
Line 10:8: 'Greet' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
Change import greet from './components/Greet' to import Greet from './components/Greet'
I am learning React JS.
Now, I am using a variable in App.js file and want to use this variable in render() method in index.js file but it's showing me this error:
./src/index.js Line 7: 'bioData' is not defined no-undef
Search for the keywords to learn more about each error.
in App.js file I have this code:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as serviceWorker from './serviceWorker';
function Person (props) {
return (
<div className="p1">
<h1>{props.name}</h1>
<h3>{props.skill}</h3>
</div>
);
}
var bioData = (
<div>
<Person name="alex" skill="designer" />
<Person name="shibbir" skill="web developer" />
</div>
);
export default Person;
and In index.js file I have following code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Person from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(bioData, document.querySelector("root"));
serviceWorker.unregister();
can you tell me why it's showing that erro?
The problem is that you haven't imported bioData into index.js (or defined it locally). In modules, top-level declarations are not globals, modules have their own scope (thankfully). So var bioData in App.js doesn't define a global index.js sees.
If you want to use biodata in index.js, export it from App.js:
export var bioData = {/*...*/};
...and import it into index.js, perhaps on the line where you're importing Person:
import Person, { bioData } from './App';
Note that that's a named export/import. You asked in a comment whether you should use export default bioData; in App.js, but you can't, you already have a default export in App.js (Person). You can have only one default export (or none), and then as many named exports as you like (or none).
Side note: var is obsolete. Use let or const.
Side note 2, re this code:
ReactDOM.render(bioData, document.querySelector("root"));
Assuming you're trying to render to an id="root" element, it should be either document.getElementById("root") (more idiomatic) or document.querySelector("#root"), but not document.querySelector("root") (which looks for a <root>...</root> element).
I'm trying to display my Deal component but I keep getting this error below.
I'm using Meteor with ReactJS.
Uncaught ReferenceError: Deal is not defined
at meteorInstall.imports.routes.routes.js
Here is my routes.js file
<Route path="/deals" component={Deal} secure="auth" />
My Deal.js component file, that the route should be linking too.
import React from 'react';
import { Link } from 'react-router';
import PrivateHeaderNav from './PrivateHeaderNav.js'
export default class Deal extends React.Component {
render() {
return (
<div className="content">
<PrivateHeaderNav/>
Deal
</div>
);
}
}
Am I missing something in the imports or in my Deal component?
Thanks
Your routes.js file is lacking the import of Deal component.
make sure you have this line in route.js:
import Deal from './path/to/Deal.js';