Page not rendering due to unterminated jsx content?

Problem with rendering

My react page isn't rendering after I start up the yarn server. The error message says unterminated jsx issue and point to: /home/johan/craftacademy/bootcamp/react_portfolio/src/index.js: Unterminated JSX contents (27:18). I can't see what the issue is but I suspect it is something about closing empty brackets.

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/johan/craftacademy/bootcamp/react_portfolio/src/index.js: Unterminated JSX contents (27:18)

25 | 26 |

27 | ,

Background

I have tried commenting out different parts of the code but it doesn't help. I have also tried to simplify the code. The error of unterminated jsx contents then just moves up in the code to a diffrent section. Again, I suspect that it concerns either the empty brackets, some syntax or closing syntax missing that breaks it. That could be entirely wrong.

Story

Please add a story if applicable

As a User,
I want to visit a portfolio website
I would like to see the sample projects

Spec

Please write a spec if any between the back ticks

describe("Portfolio interface", () => {
it("successfully renders", () => {
cy.visit("http://localhost:3000");

Implementation code

Please add your implementation code between the back ticks in the example below

aimport React from "react"; import ReactDOM from "react-dom"; import Hello from "./Hello"; import Header from "./Header"; import Footer from "./Footer"; import { Switch, Route, BrowserRouter } from "react-router-dom"; import Projects from "./Projects"; import About from "./About";


const App = () => {
  return (
    <>
      <Header />
      <Switch>
        <Route exact path="/" component={Hello}></Route>
        <Route exact path="/about" component={About}></Route>
        <Route exact path="/projects" component={Projects}></Route> 
      </Switch> 
      <Footer />
    <>
  );
};

ReactDOM.render(
  <BrowserRouter>
   <App /> 
  </BrowserRouter>,
  document.getElementById("app"));

Screenshots

cypress-unterminatedjsxissueerrormessage

unterminated-jsx-contents

How did you try to solve the problem?

Write the steps you took to try to fix the problem here

Markdown guide

CraftAcademy / CraftOverflow