Unable to resolve [signature-verification-failure] and [incompatible-call] errors in Flow

Question

I have a file Foo.js:

    // @flow
    export const Foo = ((
      x: number,
      y: number
    ) => {
      class Foo {
        bar1: number;
        bar2: number;
    
        constructor(x: number, y: number) {
            this.bar1 = x;
            this.bar2 = y;
        }
      }
    
      return Foo;
    })();

Flow check is returning these errors:

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression.Flow(signature-verification-failure)

Cannot call function because function [1] requires another argument.Flow(incompatible-call)

Foo.js(2, 21): [1] function

If I make this change to the last line, the errors go away:

    })(): void;

But the new error is:

Unexpected token :, expected the token ;Flow(ParseError)

which leads me to believe this may not be the right fix. The reason the module is formatted as such is because it's used as an Object in other files, like so: new Foo(1,2)

Answer 1

You basically have two issues, both are unrelated.

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression.Flow(signature-verification-failure)

This first one is caused by the types-first architecture, which means whenever you export a variable in a module, you must explicitly type what it is. You can find the explanation here.

---

Cannot call function because function [1] requires another argument.Flow(incompatible-call)

This one is because you've created an anonymous function that you invoke immediately before it's exported, this invoked function expects x and y as numbers but you're calling it with nothing.

---

The fix would look something like this. All I've done is created an interface type for the export and called the anonymous function with (1, 2). Whether or not this is what you actually want for your use case is for you to decide, but you can tweak the code to your usage as I doubt you really want to hardcode (1, 2).

// @flow
interface FooT {
  // something
}

export const Foo: FooT = ((
  x: number,
  y: number
) => {
  class Foo {
    bar1: number;
    bar2: number;

    constructor(x: number, y: number) {
        this.bar1 = x;
        this.bar2 = y;
    }
  }

  return Foo;
})(1, 2);