Flow: Error:(34, 11) Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at function return: (`signature-verification-failure`)

[Macilias]

Flow version: v0.113.0

Expected behavior

no errors

Actual behavior

error: Error:(34, 11) Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at function return: (signature-verification-failure)
on render() method

• Link to Try-Flow or Github repo:

I have a stripped down the following example only so far that it does not rely on further depencies, otherwise I would have to disclose nearly the whole project. But in the following example the flowserver keeps on highlighting the space between render() and the following { and sayis:

Error:(34, 11) Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type annotation at function return: (signature-verification-failure)

/* @flow */

import React, { Fragment, useState } from 'react';


export class AppConfig {
  modelName: string;

  constructor(modelName: string) {
    this.modelName = modelName;
  }
}

const default_config: AppConfig = new AppConfig('yolo');
function loadAppConfig(): AppConfig {
  return default_config;
}

class App extends React.Component<{}, {config: AppConfig}>{

  async componentDidMount() {
    const config = loadAppConfig();
    console.log("config: " + JSON.stringify(config));
    this.setState({
      config: config,
    });
  }

  setConfig(config: AppConfig): void {
    console.log("SET config has been called with config: ", config);
    this.setState({config: config});
    // saveAppConfig(config);
  }

  render() {
    return (
      <Fragment>
      </Fragment>
    );
  }
}

export default App;

The same is stated, when using direct state initialization like this:

class App extends React.Component<{}, {config: AppConfig}>{

  state = {
    config: default_config,
  };
 ....

Than the state block is highlighted. The only way to re express this is to fall back to constructor like this:

  constructor() {
    super();
    this.setState({config: default_config});
  }

Whats wrong about it, it did work before :(

[Macilias]

// $FlowFixMe

takes at least the annoying errors away, and the application is running as it should

[gkz]

What is the return type of your render function? This is what it is asking for. E.g. render(): React.Node { ... }

Also, when you do

class App {
  state = {
  }

You are defining an instance variable state. Give it a type, e.g.

  state: State = {
  }

Instance variables can be re-assigned, that's why you need a type annotation

[Macilias]

I didn’t try :React.Node but I did most certainly try :State and it didn’t help.
I’ll look into it tomorrow again. Thanks.

[Macilias]

This does not work either:

Flow: Cannot get `React.Node` because property `Node` is missing in object 

type [1].  [1] object type: ../../../../../tmp/flow/flowlib_1dc3edbf/react.js:412

[gkz]

You can take a look at https://flow.org/en/docs/react/types/#toc-react-node

[jamesisaac]

Flow: Cannot get React.Node because property Node is missing in object

You need to import React with the types:

import * as React from 'react';

[Macilias]

thanks, that fixed the issue!

[MadDeveloper]

Flow: Cannot get React.Node because property Node is missing in object

You need to import React with the types:

import * as React from 'react';

Even if the issue is resolved and closed, I post another solution to an underlying drawback of this solution for new readers like me.
When you use:

import * as React from "react"

You have to prefix all your future use of React's API by React. (Fragment, hooks, etc.):

const [count, setCounter] = React.useState(0)

Instead, you can use import type to solve above drawback:

import type {Node} from "react"
import React, { Fragment, useState } from "react"

const [counter, setCounter] = useState(0)

As I'm always using hooks, I find boring to prefix everytime hooks call with React..
BTW, better for tree shaking.