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