如何在沒有配置文件的情況下修復導入/導出babel-eslint？

Question

當我點擊npm start時，我有以下錯誤：

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

當我查看這個錯誤時，他們說我需要更新eslint配置文件，並在解析器選項中輸入true和all。 但是，我沒有eslint配置文件，我的包json看起來像這樣：

{
  "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"
  ]
}

更新：整個錯誤：

./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">

鏈接到我的App.js代碼：

我的app.js github代碼鏈接

更新錯誤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 |

我的Article.js github代碼

Answer 1

import和export語句不能在函數或類定義中，它們必須在模塊級別。

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

錯誤很明顯：在render方法的中間有一個額外的export語句。

看起來你有一些重復的代碼render 。 刪除這些行： https ： //github.com/AdenSTL/stackoverflow-errors/blob/master/App.js#L131-L153

所以render看起來像這樣：

  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>
    );
  }