Flow outdated in v3 of the course

I am working my way through version 3 of the Complete Intro to React course and when it came to the Flow chapter (integrating Types to JS and React) I had a lot of problems getting Flow to work. It turned out to be mainly a versioning issue between flow and flow-typed (and their repos containing the type definitions).

I have resolved these issues by upgrading both flow (or rather flow-bin) and flow-typed to a recent version, and using the new Flow syntax.

I wanted to share my solution so anyone working through the course now could hopefully save some time. Also I used VSCode rather than Sublime, so if you have any questions on how to integrate Flow with VSCode, let me know!

Here is what I did:

First remove flow and flow-typed: $ yarn remove flow-bin flow-typed flow

then install it again as a developer dependency: $ yarn add --dev flow-bin flow-typed

You can check the new versions are installed in package.json under dev:

"devDependencies": {
 [...]
  "flow-bin": "^0.77.0",
  "flow-typed": "^2.5.1",

Note: Depending on when you run the commands these version numbers may be higher than what I have here.

Now follow the course along (Flow chapter), to setup (yarn flow init) and get the type definitions (yarn flow-typed install) and check you added the styledcomponents to the [ignored] and [libs] section in the .flowconfig.

Ie. your .flowconfig file looks like this:

[ignore]
<PROJECT_ROOT>/node_modules/styled-components/*

[include]

[libs]
styled-components

[lints]

[options]

[strict]

Now you will still get errors when you add the flow annotation (// @flow) to the Search.jsx page. This is because you are now using a new version of Flow, and they updated their syntax. To read up on some differences check out these resources:

• React Components + Flow Types
• React Events + Flow types

Implementing the new syntax your Search.jsx file will look like this now:

// @flow

import * as React from 'react';
import preload from '../data.json';
import ShowCard from './ShowCard';

type State = {
  searchTerm: string
};

class Search extends React.Component<void, State> {
  state = {
    searchTerm: ''
  };

  handleSearchTermChange = (
    event: SyntheticKeyboardEvent<HTMLInputElement>
  ) => {
    this.setState({ searchTerm: event.currentTarget.value });
  };

  render() {
    return (
      <div className="search">
        <header>
          <h1>h4p1 video</h1>
          <input
            onChange={this.handleSearchTermChange}
            value={this.state.searchTerm}
            type="text"
            placeholder="Search"
          />
        </header>
        <div>
          {preload.shows
            .filter(
              show =>
                `${show.title} ${show.description}`
                  .toUpperCase()
                  .indexOf(this.state.searchTerm.toUpperCase()) >= 0
            )
            .map(show => <ShowCard {...show} key={show.imdbID} />)}
        </div>
      </div>
    );
  }
}

export default Search;

[ekzor]

Thanks for all your help @Pitt-Pauly! I had actually already started from that commit and it was no use. That being said, I finally solved the problem after 3 long days of troubleshooting!

And since somebody else will inevitably come across this thread when searching for why they keep getting ‘cannot resolve module’ for their project files/react modules: The problem was Cygwin. flow works fine when invoked from the Windows cmd prompt, it’s just the Cygwin prompt that was breaking it (even though it was being run via yarn in both cases).

I’ll submit this as a bug to both flow and cygwin and they can figure out whose fault it is (or maybe I’ll dig into the code to see if I can puzzle it out myself), since Windows console apps are supposed to work the same under Cygwin as they do in cmd.

Sorry again for hijacking your thread! Hopefully this helps somebody else in the same situation.

[biblicalph]

I run into the error cannot call render with document.getElementById(...) bound to container because null is incompatible with ... - see the attached image for more details

I applied the solution proposed in this StackOverflow question to resolve it.

It basically says you should change the renderApp function to:

const renderApp = () => {
    const appElement = document.getElementById('app')

    if (appElement) {
           render(<App />, appElement)
    }
}

Hope this helps