How to fix import/export babel-eslint without configuration file?

Question

When I hit npm start, I have the following error:

Parsing error: 'import' and 'export' may only appear at the top level

When I looked into this error, they said I need to update eslint configuration file and in parser options put true and all. But, I do not have eslint config file and my package json looks like this:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.6.1",
    "@material-ui/icons": "^3.0.1",
    "material-icons-react": "^1.0.4",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1",
    "truffle-contract": "^4.0.0-beta.1",
    "web3": "^1.0.0-beta.36"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Update: the whole error:

./src/App.js
  Line 131:  Parsing error: 'import' and 'export' may only appear at the top level

  129 |     );
  130 | 
> 131 |   export default App;
      |   ^
  132 | 
  133 |       <div id="dashboard">
  134 |         <div className="menu">

Link to my App.js code:

my app.js github code link

Update error 2:

./src/Article.js
  Line 11:  Parsing error: Unexpected token, expected ","

   9 |       return (
  10 |         {/* sorting articles by score */}
> 11 |         articles.sort(function (a, b) {
     |         ^
  12 |           return a.score - b.score;
  13 |         });
  14 |

my Article.js github code

Answer 1

import and export statements cannot be inside a function or class definition, they have to be at the module level.

import something from './file'; // <-- module level, outside function

function App() {
  export default App; // <-- inside function, this will break everything
  return <div>Hello</div>
}

export default App // <-- module level, outside function

The error is pretty clear: you have an extra export statement in the middle of your render method.

It looks like you have some duplicated code render . Remove these lines: https://github.com/AdenSTL/stackoverflow-errors/blob/master/App.js#L131-L153

so that render looks like this:

  render() {
    return (
      <AppBar position="static">
        <div id="dashboard">
          <div className="menu">
            <MenuItem onClick={this.handleClose}>
              <NavLink exact to="/CardStack">
                Home
              </NavLink>
            </MenuItem>
            <MenuItem onClick={this.handleClose}>
              <NavLink exact to="/Article" >
                Article
              </NavLink>
            </MenuItem>
          </div>
          <div className="content">
            <Route exact path="/CardStack" component={CardStack} />
            <Route exact path="/Article" component={Article} />
          </div>
        </div>
      </AppBar>
    );
  }