Search code examples
react-bootstrappatternfly

react-bootstrap bsClass getting set incorrectly when built in production mode

I'm running into a problem where dropdown menus are displaying incorrectly after building react-bootstrap in production mode:

enter image description here

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?

Solution

  • So, this turned out to be an issue with Angular. Disabling build optimizations in angular.json fixed the problem.

    "production": {
  ...
  "vendorChunk": false,
  "buildOptimizer": false,

    The build optimizer reduces the size of the compiled package, so while this solution works, it is not without downsides.