Summary: Serverless Stack tutorial breaks because Navbar.Header was removed from React Boostrap package

Serverless Stack is a nice way to discover how to build web apps using React.

However, it sometimes gets out of date. They have a page on “containers” which instructs you to add a React-Bootstrap component called NavBar.Header to your App.js, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }
}

export default App;

If you’ve followed their instructions up to this point, you will now find that the React server crashes with the following error:

1

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Debugging this issue turned out to be pretty easy. I removed the entire content of the render method except for the outer div, and the error message went away:

1
2
3
4
5
6

  render() {
    return (
      <div className="App container">
      </div>
    );
  }

I just kept adding back React components until I got the error again when I added back <Navbar.Header>. A quick look into the project at github told me that <Navbar.Header> was removed a few months ago. Removing the <Navbar.Header> tags in my local version of the tutorial file was enough to make the errors go away, although the resulting view was not lovely. I talk about how I fixed this React Boostrap style problem in a later post.

I also noticed a warning message in my Javascript console:

1
2
3

Warning: Received `true` for a non-boolean attribute `fluid`.

If you want to write it to the DOM, pass a string instead: fluid="true" or fluid={value.toString()}.

When I changed <Navbar fluid collapseOnSelect> to <Navbar fluid="true" collapseOnSelect>, this warning vanished.