I'm running into a problem where dropdown menus are displaying incorrectly after building react-bootstrap in production mode:
Upon closer inspection it looks like the HTML is being loaded with the wrong class: <ul role="menu" class="super-colors -menu" aria-labelledby="dropdown-custom-1">. In this case the class should be dropdown-menu and not -menu.
When I inspect the props elements it looks like this is being caused by bsClass being set incorrectly:
{
"className": "super-colors",
"bsRole": "menu",
"pullRight": false,
"bsClass": "-menu",
"open": false,
"labelledBy": "dropdown-custom-1",
"onClose": "[function bound ]",
"onSelect": "[function ]",
"rootCloseEvent": "mousedown"
}
For reference, here is the code for the element shown above:
<ButtonToolbar>
<Dropdown
id="dropdown-custom-1"
onToggle={() => console.log('hi')}
rootCloseEvent="mousedown"
>
<Dropdown.Toggle>Pow! Zoom!</Dropdown.Toggle>
<Dropdown.Menu className="super-colors">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3" active>
Active Item
</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</Dropdown.Menu>
</Dropdown>
</ButtonToolbar>
Some other (possibly) relevant information:
- We're using a UI library called patternfly-react that's built on top of react-bootstrap, but the problem seems to be in react-bootstrap.
- The app uses react-bootstrap 0.32.1
- This only shows up when the app is built in production mode, dev mode works fine.
- We have a fairly unconventional setup where we're running React inside of an Angular 6 app.
Anyone have a clue what might be causing this to happen?

So, this turned out to be an issue with Angular. Disabling build optimizations in angular.json fixed the problem.
The build optimizer reduces the size of the compiled package, so while this solution works, it is not without downsides.