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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…