Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flow outdated in v3 of the course

See original GitHub issue

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:







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:

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">
          <h1>h4p1 video</h1>
              show =>
                `${show.title} ${show.description}`
                  .indexOf(this.state.searchTerm.toUpperCase()) >= 0
            .map(show => <ShowCard {} key={show.imdbID} />)}

export default Search;

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:8

github_iconTop GitHub Comments

ekzorcommented, Aug 5, 2018

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.

biblicalphcommented, Aug 19, 2018

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

screen shot 2018-08-14 at 5 04 30 pm

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Upgrading Your Maps JavaScript API Application from V2 to V3
Remove any references to obsolete methods. A number of general purpose utility ... The following classes have no parallel in the Maps JavaScript...
Read more >
Upgrade Guide - Tailwind CSS
Replace clearfix with flow-root. The clearfix class has been removed since flow-root is a simpler solution to the same problem in modern browsers....
Read more >
YOLO V3 Explained - Towards Data Science
Objectness loss — due to a wrong box-object IoU prediction,; Classification loss — due to deviations from predicting '1' for the correct classes...
Read more >
Complete Intro to React, v3 (feat. Redux, Router & Flow)
We now recommend you take the Complete Intro to React, v8 course. Learn how to build real world applications with React! Much more...
Read more >
It's 2021, and You Should Switch to Yarn 2 - Atomic Spin
And of course, if you aren't working on a React Native, Flow, or VSCE package project, this likely isn't even an issue.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found