javascript - Parsing Error : Identifier 'App' has already been declared - Stack Overflow

admin管理员组

文章数量:1291008

I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error. Below I am sharing the code of App.js file and the browser generated error.

import React, { Component } from 'react'
import './App.css';

import PlayList from "./ponentes/PlayList"
import SearchBar from "./ponentes/SearchBar"
import SearchResults from "./ponentes/SearchResults"


class App extends React.Component{
//code to be written
}

function App() {
  return (
    <div>
      <h1>
        <a href="http://localhost:3000">Melophile</a>
      </h1>
      <div className="App">
        <SearchBar onSearch={this.search}/>
        <div className="App-playlist">
          <SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/>
          <PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} />
          
        </div>
      </div>
    </div>
  );
}

export default App;

Browser error:

Compiled with problems:

ERROR in ./src/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)

  11 | }
  12 |
> 13 | function App() {
     |          ^
  14 |   return (
  15 |     <div>
  16 |       <h1>

Looking for experts help to solve this problem.

I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error. Below I am sharing the code of App.js file and the browser generated error.

import React, { Component } from 'react'
import './App.css';

import PlayList from "./ponentes/PlayList"
import SearchBar from "./ponentes/SearchBar"
import SearchResults from "./ponentes/SearchResults"


class App extends React.Component{
//code to be written
}

function App() {
  return (
    <div>
      <h1>
        <a href="http://localhost:3000">Melophile</a>
      </h1>
      <div className="App">
        <SearchBar onSearch={this.search}/>
        <div className="App-playlist">
          <SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/>
          <PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} />
          
        </div>
      </div>
    </div>
  );
}

export default App;

Browser error:

Compiled with problems:

ERROR in ./src/App.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)

  11 | }
  12 |
> 13 | function App() {
     |          ^
  14 |   return (
  15 |     <div>
  16 |       <h1>

Looking for experts help to solve this problem.

• javascript
• reactjs
• parsing-error

Share Improve this question Follow asked Feb 28, 2022 at 7:19 ahaqueahaque 3311 gold badge11 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The error you are seeing is because you have these two things:

class App extends React.Component{

And

function App() {

Therefore, there is a problem identifying what you are referring to. You either need to rename one of these places or decide what you want to work with (class or functions).

You have a class named App and a function named App. You can't have two things named the same.

What it appears you've done is mixed class-based React syntax with more modern functional syntax. Since you don't have anything written inside the class yet, it seems safe to assume you're not actually using class-based syntax, so you can simply remove the class (delete the following)

class App extends React.Component{
//code to be written
}

In your code you declared App class and then declare App function. So It's giving that App is already declared.

class App extends React.Component{
    //code to be written
}
        
function App() {

So you can do,

1. Rename any one
2. Remove any one
3. Declare function inside class with diff name of class or function

you can use class based ponent or hook based ponent. you can't use mix of them. you can look for more detail information.. https://reactjs/docs/hooks-intro.html

本文标签： javascriptParsing ErrorIdentifier 39App39 has already been declaredStack Overflow