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

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 "./componentes/PlayList"
import SearchBar from "./componentes/SearchBar"
import SearchResults from "./componentes/SearchResults"
class App extends React.Component{
//code to be written
}
function App() {
return (
<div>
<h1>
Melophile
</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.

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,
Rename any one
Remove any one
Declare function inside class with diff name of class or function

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

Related

React App is not working due to one component

I have created a react app using the command create-react-app my-app
and when I build and start its working fine using npm start
Now I added one .JS file inside the SRC folder and used the tag inside App.Js
Here is the below code for that component
import React from 'react'
class Footer extends React.Component {
render() {
return (
<div>
<h1>It's a bit chilly out there</h1>
</div>
);
}
}
export default Footer;
After that I have added the Component into App.JS
class App extends React.Component{
render() {
return (
<>
<div>
Test Component created using Class
<Footer/>
</div>
</>
);
}
}
export default App;
After successfully compilation when I ran my app, I got empty browser and also get error in Console.
From the screenshots, i have understood to change the case used to name the react components.
Is your footer component named as Footer.js
Is your App component named as App.js
Comment if the above changes worked.

Trying to figure out the definition of JSX.Element

I am trying to make use of a JSX.Element within a React application. The compiler is unhappy though.
I have two files Main.tsx and EmployeeMask.js. For some reason I am not sure of I cannot use EmployeeMask in its JSX form <EmployeeMask /> as it is not understood as a JSX component.
Here is my Main.tsx file:
export interface MainProps {}
export interface MainState {}
export class Main extends React.Component<MainProps, MainState> {
public constructor(props: any) {
super(props);
}
private maskChooser(): JSX.Element {
return <EmployeeMask />;
}
public render() {
return <div>
{this.maskChooser()}
</div>;
}
}
Here is my EmployeeMask.js file:
import React from 'react';
export class EmployeeMask extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
EmployeeMask
</div>
)
}
}
The compiler tells me the following though:
(alias) class EmployeeMask
import EmployeeMask
'EmployeeMask' cannot be used as a JSX component.
Its instance type 'EmployeeMask' is not a valid JSX element.
Type 'EmployeeMask' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786)
I already tried adding export default EmployeeMask;, but this did not change anything.
Why does the compiler not recognize this as a JSX.Element?
You seem to be calling <EmployeeMask />, but the exported component's name is EmployeeMask2, which means it should be called like <EmployeeMask2 />.
This happens because it is a regular export (export class instead of export default class), so when you import it, you have to use something like import {EmployeeMask2} from '<path>/EmployeeMask.js'.
If you used a default export, you could call it however you want in your file, like:
import Whatever from '<path>/EmployeeMask.js'
I got the answer and wanted to post it here in case someone has had the same problem. I found this online TypeScript to JavaScript transpiler in which I could transpile a working TypeScript class into JavaScript in order to compare and find out what was the problem before.
Diffing the result with what I had showed that the import was the problem.
import React from 'react';
instead of
import * as React from 'react';
Correcting this by adding "* as " solves the problem and makes the class usable.

react-collapsible Failed to Compile

Im working on spring+reactJS project, currently working on front-end (begginer in this field).
Generally i try to create simple accordion from "REACT-COLLAPSIBLE".
Code is very Simple: JS File:
import React, { Component } from 'react';
import { Link } from "react-router-dom";
import '../index.css';
import Collapsible from "react-collapsible/src/Collapsible";
class Author extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Collapsible trigger="Start here">
<p>This is the collapsible content. It can be any element or React component you like.</p>
<p>It can even be another Collapsible component. Check out the next section!</p>
</Collapsible>
);
}
}
export default Author;
I have installed react-collapsible and i have proper dependency in package.json
When i try to compile this code i have compilation error:
Failed to compile.
./node_modules/react-collapsible/src/Collapsible.js
Module parse failed: Unexpected token (116:8)
You may need an appropriate loader to handle this file type.
| if (this.props.triggerSibling && typeof
this.props.triggerSibling === 'string') {
| return (
| <span className={`${this.props.classParentString}__trigger-
sibling`}>{this.props.triggerSibling}</span>
| )
| } else if(this.props.triggerSibling) {
Certainly this is only a part of project, except this part everything works. I have no idea what should i do, if error is connected with other part of code, which could be useful, let me know.
Sth is wrong with react-collapsible module? What should i do? When i installed it i didn't receive any WARN, that other dependency should be added
Change your import to import Collapsible from "react-collapsible";
You are importing from the src rather than the dist which has been processed.
If you checkout the package.json for this module you will see that the default exported file is dist/Collapsible.js.

React native: export default App with multiple module wraps

I Have the following App.js in my react native project:
class App extends Component {
render() {
return (
<ApolloProvider store={store} client={client}>
<AppWithNavigationState />
</ApolloProvider>
);
}
}
export default App = codePush(App);
I am trying to add aws amplify authenticator to my project (https://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-development) but the steps tell me to add :
export default withAuthenticator(App);
^^ How do I do that when I have already codePush wrapped around the App component that I am exporting?
TL;DR:
The withAuthenticator is basically a higher order component which takes a component, decorates it (i.e. provide some special props or customizations of sorts) and returns a new component composed of the component you passed in. So in your case if you want multiple HOCs, you can simply say -
export default withAuthenticator(codePush(App))
This syntax can get potentially nasty from a readability standpoint if you have, say, 5 decorators. It is useful in such cases to use the new decorator syntax. With it you can do neat things like -
#mySpecialDecoratorThatDoesNiceThings
#withAuthenticator
#codePush
export default class App extends Component {
...
}
If you are using babel, check out this transform-decorators babel plugin to make sure decorators are correctly transpiled.

React.js with browserify imports not working

I am learning React.js and can not make my firt component to render. My project looks like this:
javascript
|
--components
| |
| ---- searchbar.jsx
|
|
--app.jsx
searchbar.jsx:
export default class SearchBar extends React.Component {
//some code
render(){
//some code
}
}
app.jsx looks like this.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from './components/searchbar.jsx';
ReactDOM.render(
<App />
,
document.getElementById('content')
);
class App extends React.Component {
render() {
<div>
<SearchBar placeHolder='search bar text'/>
</div>
}
}
When compiled and packed there is no error. However when I run it, I am getting following error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning
warning
createElement
1../components/searchbar.jsx
When I put all code in app.jsx and use no import then everything is working as should and search bar is showing.. but I want to put components in different files. How do I do that then?
SearchBar module exports a default value, not a named export (by enclosing with curly braces braces you require a named export )
You should change import { SearchBar } to import SearchBar
Additionally, you should move the declaration of App towards the beginning of the file, it should be declared before it is used

Categories

Resources