Babel-eslint: Linter reporting flow types as undefined

[mrmurphy]

I just upgraded babel-eslint to 3.1.15 and babel to 5.5.6.

It appears that babel-eslint no longer ignores flow types. I'm getting 'no-undef' and 'camelcase' errors for all of the types throughout my codebase.

I'd post console output, but I can't imagine how it would be helpful to you.
Any ideas on how to move forward? Are any of you seeing this behavior? My co-workers are reporting the same thing on their machines.

[sebmck]

It's correctly linting flow types now, why are you expecting them to be ignored?

[mrmurphy]

Sorry, here's a contrived example:

export function example(course: Course): boolean {
  return !isFantastic(course)
}

eslint throws the error: error "Course" is not defined, as if it were an undefined variable. Really, it's a flow type that is defined in an external "types" file.

Does that make more sense?

[mrmurphy]

Very cool, doing some more testing and I see now that babel-eslint will actually inform us when a flow type is undefined, which is what you said above, but I didn't understand, @sebmck.

How do I inform babel-eslint of my types that are defined in external files?

Also, I get the 'no-undef' error on functions that return ReactElement, does that have to do with eslint-plugin-react?

---

Note, I just upgraded eslint-plugin-react to version 2.5.0, and "ReactElement" is still being called out as not defined.

[hzoo]

@murphyrandle yeah we added support for flow types.

I think there's two ways to solve the external files (since ESLint doesn't have a list of flow types).
One is to import the types at the top like import type Course from './external-file';.
The other is to define globals in your .eslintrc?
ESLint also has environements with "env": node that import some pre-defined globals.

Yeah if you are using react/jsx and are getting errors, our current recommendation is to use the plugin you mentioned.

Oh I think you meant the flow type is ReactElement and its undefined?

[mrmurphy]

okay, I'll take a look at importing types, thanks @hzoo.

Yes, here's an example of the react error:

var React = require('react')

module.exports = React.createClass({
  displayName: 'Test',
  render(): ReactElement {
    return (
      <div></div>
    )
  }
})

example.jsx
  5:12  error  "ReactElement" is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

[hzoo]

Yeah for that you can just add it to your globals.
If ReactElement is part of the react package then you could do import type ReactElement from 'react'; but that probably doesn't work?

[mrmurphy]

Okay, for now I'm defining them as globals. Thanks, @hzoo.

[danez]

since flow 0.22 you need to import ReactElement with

import { Element } from 'react';

because they change some internals and ReactElement is not a global anymore.