Nav not rendered correctly in ParcelJs build: NavbarContext is removed by Nav.Collapse

Describe the bug

The Nav component is not rendered correctly in the dist output of a ParcelJs project.

To Reproduce

1. Create a ParcelJs project with React, as described at https://blog.jakoblind.no/react-parcel/.
2. Create the following App.jsx:

import React from "react";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavbarContext from "react-bootstrap/NavbarContext";

const App = () => (
  <Navbar bg="primary">
    <Navbar.Toggle />
    <NavbarContext.Consumer>
      {value => console.log("NavbarContext outside Collapse", value)}
    </NavbarContext.Consumer>
    <Navbar.Collapse>
      <NavbarContext.Consumer>
        {value => console.log("NavbarContext inside Collapse", value)}
      </NavbarContext.Consumer>
      <Nav>
        <Nav.Link href="/foo">
          Foo
        </Nav.Link>
        <Nav.Link href="/bar">
          Bar
        </Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

export default App;

Reproducible Example

I pushed a minimal ParcelJs project to demonstrate the behavior. Build steps:

git clone https://github.com/mdenburger/react-bootstrap-nav-issue
cd react-bootstrap-nav-issue
yarn build

And open dist/index.html in a browser.

Expected behavior

The navbar should render correctly, but it doesn’t: the example links Foo and Bar are not visible because the CSS classes of div rendered by the Nav component are not correct.

• Expected: class navbar-nav
• Actual: class nav

Cause: the Nav component cannot find the NavbarContext. It seems that the Nav.Collapse component somehow sets the context to null, as demonstrated by the console.log statements. Outside Nav.Collapse the context is correct, but inside Nav.Collapse it’s null. As a result, the Nav component does not realize it’s inside a navbar, and does not render the right classes.

Everything does work correctly in ParcelJs’ development server (started with yarn dev in the example repo). So it seems to be the result of ParcelJs’ bundling. Yet I haven’t seen this behavior in any other usages of the Context API in my ParcelJs project.

Environment

• Operating System: Ubuntu
• Browser: Chrome 80
• React-Bootstrap Version: 1.0.0

[jonsa]

@kosmiq Would be possible to make a PR with the following change? It seems to fix the problem for me.

import React from 'react';
var context = React.createContext(null);
context.displayName = 'AccordionContext';
export default context;

import React from 'react';
var context = React.createContext(null);
context.displayName = 'CardContext';
export default context

import React from 'react';
var context = React.createContext(null);
context.displayName = 'NavbarContext';
export default context;

[jquense]

yeah lets do it