Flow: Cannot use `SyntheticEvent` as a type because it is an `any`-typed value.

Created on 11 Dec 2020  路  2Comments  路  Source: facebook/flow

Flow version: 0.140.0 (shows in 0.132 and newer)

Expected behavior

I expect the following code -a copy from https://flow.org/en/docs/react/events/ ` to "work" and not give errors:

import * as React from 'react';

class MyComponent extends React.Component<{}, { count: number }> {
  handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {
    // To access your button instance use `event.currentTarget`.
    (event.currentTarget: HTMLButtonElement);

    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>
          Increment
        </button>
      </div>
    );
  }
}

Actual behavior

The following error shows (in version 0.140.0 - a slightly different version is shown in version 0.132.0 and version 0.131.0 gives no error:

Error:(6, 27) Cannot use SyntheticEvent as a type because it is an any-typed value. Type SyntheticEvent properly, so it is no longer any-typed, to use it as an annotation.

the error from 0.132.0:

Error:(6, 27) Cannot use SyntheticEvent as a type. A name can be used as a type only if it refers to a type, interface, class, or enum definition. To get the type of a non-class value, use typeof.

  • Link to Try-Flow or Github repo:
bug needs triage

All 2 comments

You probably aren't including the react-dom lib defs (so this error is real and showing you a problem). It used to be included in Flow itself, but we moved react-dom to https://github.com/flow-typed/flow-typed instead

Actually the module code for react-dom was moved but SyntheticEvent is still in flow.
https://github.com/facebook/flow/blob/master/lib/react-dom.js#L13

Are you using this in your own project? In the try flow it's throwing an error but works fine in my dev environment. Which is related to how the try flow doesn't implement a lot of the built-in types for performance reasons.

Was this page helpful?
0 / 5 - 0 ratings