在IDE中，JSX代码出现了"unexpected token <"流程错误。

Question

由于某种原因，我的IDE打印出以下React代码的“Unexpected token <”错误。我不明白为什么会出现这个错误，因为它所指的组件被包含在一个父标签中，特别是<TableBody>标签。请注意，相邻的JSX元素必须包含在一个封闭的父标签中。

/* @flow */
import React from 'react'
import TableBody from '@material-ui/core/TableBody'
import Roster from './roster.jsx'
import type { MembersType } from '../../typeDefs/MembersType.js'


type RanksType = {
  _id: string | number,
  rankName: string,
  members: Array<MembersType>
};

export default (props: {
  members: MembersType
}) => (
  <TableBody>
    {props.members.map(({ 
      _id,
      rankName,
      members,
    }: RanksType) => (
      <Roster <---specifically refering to this element
        key={_id}
        rank={rankName}
        members={members}
      />
    ))}
  </TableBody>
)

Package.json

{
  "name": "novacms",
  "private": true,
  "scripts": {
    "start": "meteor --settings settings-production.json --port $IP:$PORT",
    "dev": "meteor --settings settings-development.json --port $IP:$PORT",
    "test": "meteor test --driver-package cultofcoders:mocha --port $IP:$PORT"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.42",
    "@novacms/assign": "^1.0.0",
    "@novacms/dependancy-injector": "^1.0.0",
    "@novacms/event-store": "^1.0.0",
    "@novacms/extend": "^1.0.0",
    "@novacms/extendschema": "^1.0.1",
    "@novacms/has": "^1.0.0",
    "@novacms/pipe": "^1.0.0",
    "@novacms/type-check": "^1.0.0",
    "@material-ui/core": "^1.0.0-rc.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
    "bcrypt-nodejs": "0.0.3",
    "event-emitter": "^0.3.5",
    "faker": "^4.1.0",
    "lodash": "^4.17.5",
    "md5": "^2.2.1",
    "meteor-apihelper": "^1.0.0",
    "meteor-node-stubs": "^0.3.3",
    "mobx": "^3.6.1",
    "mobx-react": "^4.4.2",
    "moment": "^2.21.0",
    "npm": "^5.10.0",
    "prettier": "^1.12.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-router": "^4.2.0",
    "react-storybook": "^1.0.0",
    "recompose": "^0.26.0",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.79.1",
    "simpl-schema": "^1.4.2",
    "simpl-schema-mockdoc": "^1.0.5",
    "sinon": "^4.5.0",
    "spacejam": "^1.6.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "chai": "^4.1.2",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-meteor": "^5.0.0",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-flowtype": "^2.46.3"

  },
  "parser": "babel-eslint"
}

VSCode配置

{
    "files.eol": "\r\n",
    "editor.fontFamily": "'Fira Mono', Consolas, 'Courier New', monospace",
    "eslint.workingDirectories": [
        "./src",
        "./client",
        "./imports",
        "./server"
    ],
    "react.beautify.onSave": true,
    "editor.tabSize": 2,
    "files.trimTrailingWhitespace": true,
    "javascript.validate.enable": false,
    "javascript.format.enable": false,
}
.babelrc

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties", "syntax-dynamic-import"]
}

- user3655510

---

什么是集成开发环境（IDE）？是IDE在抱怨还是它没有编译？ - Ritwick Dey

VS Code，它在抱怨而且无法编译。 - user3655510

这是一个配置问题。请展示你的配置文件和 package.json。 - Ritwick Dey

已更新配置和 package.json 文件。 - user3655510

哦，你正在使用Mentor生成React样板代码？你需要使用.jsx扩展名，而不是.js.....请确保你的文件扩展名是正确的。 - Ritwick Dey

Answer 1

我遇到了非常类似的问题。 首先删除（或重命名）您使用的 .babelrc 文件（无论您在哪里设置它）。

如果storybook找不到该文件，它将使用自己的设置。这对我有用，以证明是该文件导致了问题。

如果您也是这种情况，请创建一个新的 .babelrc 文件，并将其放入storybook文件夹中。 Storybook 现在将使用此文件，而您的项目可以继续使用现有的文件。

棘手的部分是找到您现有的 .babelrc 文件中破坏storybook的配置设置 - 对于我来说，它是 react-hot-load/babel，但您没有列出它。

我的文件最终只包含 @babel/plugin-proposal-class-properties 和 @babel/plugin-proposal-rest-spread 两个插件。

- delp