Flow 'unexpected token <' for jsx code in IDE

Question

For some reason my ide is printing out 'Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag' for the following react code. I don't understand why it's printing that error since the component it's referring to is wrapped in an enclosing parent tag the <TableBody> tag specifically.

/* @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 config

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

Answer 1

I had a very similar issue. Firstly delete (rename) your .babelrc file which you use (remove where ever you set it).

If storybook can't find that file, then it will use its own settings. This worked for me to prove that it was that file that caused the issue.

If this is the same for you then create a new .babelrc file, and place it into the storybook folder. Storybook will now use this and your project can continue to use the existing one.

The tricky part is finding the config setting in you existing .babelrc file that is breaking storybook - for me it was the react-hot-load/babel, but you don't have that listed.

My file ended up with only @babel/plugin-proposal-class-properties and @babel/plugin-proposal-rest-spread for plugins.