Summary: Serverless Stack tutorial breaks because Boostrap renamed .help-block to .form-text, and the change was propagated to React Bootstrap without documentation

Following along with the Serverless Stack tutorial… Their “create the signup form” page has some source code which imports a component called HelpBlock:

1
2
3
4
5
6
7
8

import React, { Component } from "react";
import {
  HelpBlock,
  FormGroup,
  FormControl,
  ControlLabel
} from "react-bootstrap";
...

If you try this out using react-bootstrap v1.0.0-beta.5, you’ll see the familiar “Failure to compile” message at localhost:3000, with the error 'react-bootstrap' does not contain an export named 'HelpBlock'.

It turns out that Bootstrap replaced .help-block with .form-text. This is not documented in the react-bootstrap project. It looks like it was removed between version v0.32.4 and v1.0.0-beta.0, September of 2018. To fix the problem, just replace HelpBlock with FormText in the Serverless Stack Signup.js code. You will also have to replace .help-block with .form-text in Signup.css.

You may also see a warning message in the Javascript console which comes from their LoaderButton widget. It reads

1

Warning: React does not recognize the `bsSize` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bssize` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

The solution is to find every instance of bsSize="large" in the code, and replace that with size="lg".