App.js is not defined in react project

Question

I am building a project in reactJS framework and when I had one big class App i decided to divide into a few classes. After changes I can see below error

'App' is not defined

Can anybody help me with this problem?

I tried all webpack settings but it doesn't help. It appears only after dividing the class 'App' but, before it was working fine.

Here is my code.

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

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      list,
      searchTerm: "",
    };

    this.onDismiss = this.onDismiss.bind(this);
    this.onSearchChange = this.onSearchChange.bind(this);
  }

  onSearchChange(event){
    this.setState({ searchTerm: event.target.value });
  }

  onDismiss(id) {
  const isNotId = item => item.objectID !== id;
  const updatedList = this.state.list.filter(isNotId);
  this.setState({ list: updatedList });
  }

  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="App">
        <Search 
          value = {searchTerm}
          onChange = {this.onSearchChange}
        />
        <Table 
          list = {list}
          pattern = {searchTerm}
          onDismiss = {this.onDismiss}
        />  
      </div>    
    );
  }
}


class Search extends Component {
  render(){
    const { value, onChange } = this.props;
    return(
        <form>
          <input 
            type = "text"
            value = "value" 
            onChange = {onChange}
          />
        </form>      
    );
  }
}


class Table extends Component {
  render(){
    const { list, pattern, onDismiss } = this.props;
    return(
      <div>
        {list.filter(isSearched(pattern)).map(item => 
          <div key={item.objectID}>
            <span>
                <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>{item.points}</span>
            <span>
              <button onClick={() => onDismiss(item.objectID)} type="button">
                Delete
              </button>
            </span>
          </div>
        )}
      </div>    
      );
    }
  };
}

export default App;

You are exporting only App by default but Search and Table are not exported but your App component is calling Search and Table. So inorder for its to work you need to export your Search and Table components like export class Search extends Component like wise export class Table extends Component — Hemadri Dasari, Aug 26 '18 at 12:33
"App is not defined" is this a webpack error, or a error you see in the Javascript console? Is all the code you posted in one file? — Patrick Hollweck, Aug 26 '18 at 12:33
It's not all the code. I see this error in console. It's not all the code — Vlad Nemyrovsky, Aug 26 '18 at 12:45
@Vlad Nemyrovsky please upvote and accept the answer if it resolves your issue so that thread will be closed and that will help future readers — Hemadri Dasari, Oct 13 '18 at 20:50

Hemadri Dasari · Answer 1 · 2018-09-26T17:27:23.207

The answer you'll need is here

Few things I would like to explain. Check my comments in the code below

import React, { Component } from 'react';
import './App.css'; // have proper naming conventions change it to lowercase app.css

export default class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      list,
      searchTerm: "",
    };

    //Manual binding are ok but if you use arrow function you can stay away with scope related issues like let that = this;
    //this.onDismiss = this.onDismiss.bind(this);
    //this.onSearchChange = this.onSearchChange.bind(this);
  }

  onSearchChange = (event) => {
    this.setState({ searchTerm: event.target.value });
  }

  onDismiss = (id) => {
  const isNotId = item => item.objectID !== id;
  const updatedList = this.state.list.filter(isNotId);
  this.setState({ list: updatedList });
  }

  render() {
    const { searchTerm, list } = this.state;
    return (
      <div className="App"> //Follow naming conventions chang classname App to app
        <Search 
          value = {searchTerm}
          onChange = {this.onSearchChange}
        />
        <Table 
          list = {list}
          pattern = {searchTerm}
          onDismiss = {this.onDismiss}
        />  
      </div>    
    );
  }
}

//you need to export your component to make it available to other components

export class Search extends Component {
  render(){
    const { value, onChange } = this.props;
    return(
        <form>
          <input 
            type = "text"
            value = "value" 
            onChange = {onChange}
          />
        </form>      
    );
  }
}

//you need to export your component to make it available to other components

export class Table extends Component {
  render(){
    const { list, pattern, onDismiss } = this.props;
    return(
      <div>
        {list.filter(isSearched(pattern)).map(item => 
          <div key={item.objectID}>
            <span>
                <a href={item.url}>{item.title}</a>
            </span>
            <span>{item.author}</span>
            <span>{item.num_comments}</span>
            <span>{item.points}</span>
            <span>
              <button onClick={() => onDismiss(item.objectID)} type="button">
                Delete
              </button>
            </span>
          </div>
        )}
      </div>    
      );
    }
  };
}

Thx for your answer, bur when i export classes as you wrote i receive the next: ./src/App.js Syntax error: C:/wamp64/www/React/hackernews/hackernews/src/App.js: 'import' and 'export' may only appear at the top level (74:0) — Vlad Nemyrovsky, Aug 26 '18 at 12:46
I removed export default in the bottom of the file and added before App class. Can you try with my updated answer — Hemadri Dasari, Aug 26 '18 at 12:50
Got it. the issue is with your webpack. Let me know your webpack code — Hemadri Dasari, Aug 26 '18 at 12:58
Check this thread it has all the details https://stackoverflow.com/questions/37902849/import-and-export-may-only-appear-at-the-top-level and https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/#installation — Hemadri Dasari, Aug 26 '18 at 12:59
Add this plugin in your .babelrc file { "plugins": ["dynamic-import-webpack"] } — Hemadri Dasari, Aug 26 '18 at 13:07
first install npm install babel-plugin-dynamic-import-webpack --save-dev and yes create that file and add the following { "plugins": [ "dynamic-import-webpack" ] } — Hemadri Dasari, Aug 26 '18 at 13:23
If that doesn't resolve your issue then it's difficult to identify solution for this issue without looking at your configurations. Waste of time for both of us — Hemadri Dasari, Aug 26 '18 at 13:31

App.js is not defined in react project

1 Answers1