Question

当我点击npm start时，出现以下错误：

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

当我调查此错误时，他们说我需要更新eslint配置文件，并且在解析器选项中全部设置为true。但是，我没有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代码：

my app.js github code link

更新错误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和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

错误非常清楚：您的export方法中间有一个额外的render语句。

您似乎有一些重复的代码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>
    );
  }

如何在不使用配置文件的情况下修复导入/导出babel-eslint？

1 个答案: