reactjs - why am I getting Unexpected token error in React js project?

Question

I am getting error due to to some wrong imports I guess. Below is the error:

./src/index.js
SyntaxError: E:REACT_APPdrf_projectsrcindex.js: Unexpected token (6:21)

  4 | import './index.css';
  5 | import Route from 'react-router-dom';
> 6 | import BrowserRouter as Switch from 'react-router-dom';
    |                      ^
  7 | import App from './App';
  8 | import Header from './components/Header';
  9 | import Footers from './components/Footers';

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorkers from './serviceWorker';
import './index.css';
import Route from 'react-router-dom';
import BrowserRouter as Switch from 'react-router-dom';
import App from './App';
import Header from './components/Header';
import Footers from './components/Footers';

const routing = (
    <Route>
      <React.StrictMode>
        <Header />
        <Switch>
          <Route exact path='/' component={App} />
        </Switch>
        <Footers />
        </React.StrictMode>
    </Route>
);

ReactDOM.render(routing, document.getElementById('root'));
serviceWorkers.unregister();

Please consider me new user. I have tried some permutation combination, yet didn't work. The very first import was as below:

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';

It was giving me other error, so I tried to import the sub modules individually. Please suggest what could be the right import for the given error.

Thank you,

new error:

Error: Invariant failed: You should not use <Route> outside a <Router>
invariant
E:/REACT_APP/drf_project/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:10
(anonymous function)
E:/REACT_APP/modules/Route.js:35
  32 | return (
  33 |   <RouterContext.Consumer>
  34 |     {context => {
> 35 |       invariant(context, "You should not use <Route> outside a <Router>");
     | ^  36 | 
  37 |       const location = this.props.location || context.location;
  38 |       const match = this.props.computedMatch
View compiled
? 16 stack frames were collapsed.
Module.<anonymous>
E:/REACT_APP/drf_project/src/index.js:24
  21 |     </Route>
  22 | );
  23 | 
> 24 | ReactDOM.render(routing, document.getElementById('root'));
  25 | serviceWorkers.unregister();
  26 | 
View compiled

previous error:

×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
? 22 stack frames were collapsed.
Module.<anonymous>
E:/REACT_APP/drf_project/src/index.js:22
  19 |     </Router>
  20 | );
  21 | 
> 22 | ReactDOM.render(routing, document.getElementById('root'));
  23 | serviceWorkers.unregister();
  24 | 

Latest error:

./src/index.js
SyntaxError: E:REACT_APPdrf_projectsrcindex.js: Identifier 'routing' has already been declared (25:13)

  23 | serviceWorkers.unregister();
  24 | 
> 25 | export const routing
     |              ^
  26 | 

question from:https://stackoverflow.com/questions/65913651/why-am-i-getting-unexpected-token-error-in-react-js-project

Answer 1

The syntax that you tried the first time was correct.

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';

The error message that you got on that first attempt was due to something else. I can see why the error message was misleading because it talks about imports.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

But the "invalid element" was your routing component. It's a problem because it's not actually a component!

First of all, React components must have their first letter capitalized. Otherwise it assumes that it's a built-in DOM element, like div or h1.

Secondly, React components must be either a class (which extends React.Component) or a function. What you are trying to write here is a function component which doesn't require any props. It still needs to be a function, so we make it a function with no arguments. This syntax () => is what's called an arrow function.

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorkers from './serviceWorker';
import './index.css';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import App from './App';
import Header from './components/Header';
import Footers from './components/Footers';

const Routing = () => (
    <Router>
      <React.StrictMode>
        <Header />
        <Switch>
          <Route exact path='/' component={App} />
        </Switch>
        <Footers />
        </React.StrictMode>
    </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

There's also a typo: you used Route for the outside component but you meant to use Router.