createContext is not a function

[jcoxprog]

I have just added react-bootstrap to a prototype project and get the below error. If I remove the Import and the Navbar block and rebuild, everything works as before without any changes to webpack config.

I am new to a number of the technologies here and am sure its something I have not set correctly, but any help in pointing me in the right direction would be appreciated.

Thanks

…
...
import { Navbar, Nav, NavDropdown, Form, FormControl, Button } from "react-bootstrap";

..
..

<Navbar.Brand href="#home">Paycheck Planner</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />

      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/e">Home</Nav.Link>
          <Nav.Link href="/workbench">Workbench</Nav.Link>

          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>

        <Form inline>
          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
          <Button variant="outline-success">Search</Button>
        </Form>
      </Navbar.Collapse>

    </Navbar>;

Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_3___default.a.createContext is not a function
at eval (ThemeProvider.js:15)
at Object../node_modules/react-bootstrap/es/ThemeProvider.js (bundle.js:3459)
at webpack_require (bundle.js:20)
at eval (createWithBsPrefix.js:12)
at Object../node_modules/react-bootstrap/es/utils/createWithBsPrefix.js (bundle.js:3555)
at webpack_require (bundle.js:20)
at eval (Alert.js:12)
at Object../node_modules/react-bootstrap/es/Alert.js (bundle.js:2499)
at webpack_require (bundle.js:20)
at eval (index.js:2)

[jcoxprog]

It was a version conflict, everything is working great. Thanks for creating it.

[Mottie]

Which version conflict? I'm seeing this error while using React v15.6.2. I found some issues about that error showing up if you're not using React v16.3+. Was that the case for you?

[jcoxprog]

I don't have the exact version I was on at the moment, but it was the low 16.x.x and when I came up to head revision, the problem went away.

Hope this helps.

[F-Adam-B]

@Mottie did you find a solution to the conflict with v15.6.2. I'm using v15.6.2 and it's giving me the same error. I have other packages that are in conflict with React v16+, so I can't upgrade at the moment.

[Mottie]

IIRC, it was because react-bootstrap was updated. When we switched to react-bootstrap@v0.31.3 it worked fine.

[mhectorgato]

I am getting this issue as well. My project was working ok until I did:

npm install react-bootstrap bootstrap

Based on other articles, I also tried:

npm update react react-dom

However, I am still getting this error:

TypeError: _react.default.createContext is not a function
./node_modules/react-bootstrap/ThemeProvider.js
... LiebTechReact/ClientApp/node_modules/react-bootstrap/ThemeProvider.js:20

npm show react version
16.8.6

npm show react-bootstrap version & npm view react-bootstrap version
1.0.0-beta.8

[shaiperson]

Hey @mhectorgato , I seem to be having the exact same error. Did you find a solution?

[mhectorgato]

Hey @mhectorgato , I seem to be having the exact same error. Did you find a solution?

No never did

[MarkEmerson]

whats the fix for this as we are getting the same error after updating bootstrap to v4. "react": "15.3.2"

[ztorstri]

I was doing this for a .NET Core app, and the trick for me was to be in the "ClientApp" directory instead of the src directory. Then I ran
npm install --save react react-dom react-bootstrap bootstrap

That fixed it. Versions for reference:
"bootstrap": "^4.3.1"
"react": "^16.8.6"
"react-bootstrap": "^1.0.0-beta.9"
"react-dom": "^16.8.6"

[MarkEmerson]

thanks for coming back. trying that now...

[MarkEmerson]

oh boy - a stack of peer dependency errors and fails to compile. wondering if anyone else encountered similar?. Im assuming at this stage ill have to do a manual install of all of these dependencies

[taion]

You need React 16.x. We no longer support 15.x.

[MarkEmerson]

thanks @taion we are now on 16.8. now we have this:

ERROR in ./~/react-addons-css-transition-group/index.js Module not found: Error: Can't resolve 'react/lib/ReactCSSTransitionGroup' in...

trying to resolve
noticed a refrence to: module.exports = require('react/lib/ReactCSSTransitionGroup')
in react-addons-css-transition-groups/index.js

but there is no folder called LIB under REACT

is the index.js pointing to the correct place or am I missing something else?

[arslana11]

I was doing this for a .NET Core app, and the trick for me was to be in the "ClientApp" directory instead of the src directory. Then I ran
npm install --save react react-dom react-bootstrap bootstrap

That fixed it. Versions for reference:
"bootstrap": "^4.3.1"
"react": "^16.8.6"
"react-bootstrap": "^1.0.0-beta.9"
"react-dom": "^16.8.6"

Thanks man you save my life :D

[KungoJung]

I was doing this for a .NET Core app, and the trick for me was to be in the "ClientApp" directory instead of the src directory. Then I ran
npm install --save react react-dom react-bootstrap bootstrap

That fixed it. Versions for reference:
"bootstrap": "^4.3.1"
"react": "^16.8.6"
"react-bootstrap": "^1.0.0-beta.9"
"react-dom": "^16.8.6"

Bootcamp student here working on an electron app and bootstrap for the first time. This worked, thanks for saving my butt!