1

I was running npm to test to see what working for the school project I've been working on. I got this error and commented out everywhere I found the word app.

This is the error:

Syntax error: Identifier 'App' has already been declared (11:7)

   9 | import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  10 | 
> 11 | const App = () => (
     |       ^
  12 |     <Router>
  13 |         <div>
  14 |             <ul>

Here is the code associated in the file its listing:

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import About from './screens/About';
import Characters from './screens/Characters';
import Home from './screens/Home';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App = () => (
    <Router>
        <div>
            <ul>
                <li>
                    <Link to='/'>Home</Link>
                </li>
                <li>
                    <Link to='/about'>About</Link>
                </li>
                <li>
                    <Link to='/characters'>Characters</Link>
                </li>
            </ul>

            <hr />

            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/characters" component={Characters} />
        </div>
    </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));

I don't know what else to try.

I had a class called app and commented it out, I'm not sure where else the identifier called app could be in my project.

The Lilian
  • 21
  • 1
  • 5

1 Answers1

5

The identifier App has already been declared on this line: import App from './App'; I suggest changing the name of the function, something like:

const MyApp = () => (
   ...
);

ReactDOM.render(<MyApp />, document.getElementById('root'));

(The name of the function is up to you)

You Nguyen
  • 9,961
  • 4
  • 26
  • 52