CODEWITHSUNDEEP
reactjs
tanvirgeek
tanvirgeek

Reputation: 163

I am getting a Parsing Error: Parsing error: Unexpected token, expected ";" in React

While trying to bring back components to app.js and running the react code by npm start, I am getting a parsing error which is: 

    ./src/App.js
      Line 5:  Parsing error: Unexpected token, expected ";"

      3 | import "bootstrap/dist/css/bootstrap.min.css";
      4 |
    > 5 | import "CreateTodo" from "./components/create-todo.component";
        |                     ^
      6 | import "EditTodo" from "./components/edit-todo.component";
      7 | import "TodoList" from "./components/todo-list.component";

My Codes in App.js :

import React from 'react';
import {BrowserRouter as Router, Rout, Link} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

import "CreateTodo" from "./components/create-todo.component";
import "EditTodo" from "./components/edit-todo.component";
import "TodoList" from "./components/todo-list.component";

function App() {
  return (
    <Router>
        <div className="container">
            <h2>MERN Stack To Do App</h2>
            <Route path="/" exact component = {TodoList} /> 
            <Route path="/edit/:id" component = {EditTodo} />
            <Route path= "/create" component ={CreateTodo} />
       </div>
    <Router>
  );
}

export default App;

What's the error? Thanks in advance.

Upvotes: 0

Views: 443

Answers (3)

nahid
nahid

Reputation: 39

Import can not be a string. so import like this

import CreateTodo from "./components/create-todo.component";

And in below-mentioned line Rout should be Route

import {BrowserRouter as Router, Rout, Link} from "react-router-dom";

Upvotes: 1

shivangi rajde
shivangi rajde

Reputation: 1

import CreateTodo from "./components/create-todo.component";
import EditTodo from "./components/edit-todo.component";
import TodoList from "./components/todo-list.component";

These statements allow you to import CreateTodo from the component mentioned. Instead of importing "CreateTodo" as string import them as shown above.

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

I think you have wrong imports,

import "CreateTodo" from "./components/create-todo.component";
import "EditTodo" from "./components/edit-todo.component";
import "TodoList" from "./components/todo-list.component";

import name should not be string,

import CreateTodo from "./components/create-todo.component";
import EditTodo from "./components/edit-todo.component";
import TodoList from "./components/todo-list.component";

Upvotes: 4

Related Questions