Eslint-plugin-react: Unexpected token when parsing stateless component with flow annotated return type

[meleyal]

I'm not sure if this is the right place for this issue, but only eslint complains about the following code, both babel and flow compile without errors / warnings.

export const PageList = ({ pages, width, height }: Props): ReactElement => {
  ...
}

results in:

20:61  error  Parsing error: Unexpected token

[yannickcr]

It seems you're using the ESLint default parser Espree, but Espree does not support flow annotations (https://github.com/eslint/espree/issues/189).

You'll need to use babel-eslint for this.

[meleyal]

I'm actually using "babel-eslint": "^4.1.6" already.

[meleyal]

I've also tried "parser": "babel-eslint" in .eslintrc.

[meleyal]

Any other ideas on what could be causing the error?

[yannickcr]

I cannot reproduce the error with [email protected] and [email protected].

I'm pretty sure this is not related to eslint-plugin-react at all since the parse error come from ESLint.

But if you can provide me more information (eslint/babel-eslint versions, .eslintrc file and the full source file) maybe I could find the problem.

[meleyal]

[email protected] + [email protected]

.eslintrc:

{
  "parser": "babel-eslint",
  "extends": "rackt",
  "env": {
    "mocha": true
  },
  "rules": {
    "strict": 0,
    "new-cap": 0,
    "comma-dangle": [1, "always-multiline"],
    "react/jsx-uses-react": 1,
    "react/wrap-multilines": 2,
    "flow-vars/define-flow-type": 1,
    "flow-vars/use-flow-type": 1
  },
  "plugins": [
    "react",
    "flow-vars"
  ]
}

MyComponent.js:

// @flow

import React from 'react'
import { Page } from '../models/Page'

type Props = {
  page: Page,
  width: number,
  height: number
}

export const MyComponent = (props: Props): ReactElement => {
  ...

  return (
    <img key={ref} src={imageUrl} style={style} />
  )
}

[DaleLJefferson]

@meleyal I can reproduce this issue without eslint-plugin-react I think we need to raise this in ESLint or babel-eslint

This is the simplest version that throws the Parsing error: Unexpected token error

const add = (a: number, b: number): number => a + b;

[meleyal]

Upgrading to [email protected] fixes the issue: https://github.com/babel/babel-eslint/issues/237