Using pre-built components from:
- https://react-bootstrap.github.io/components/navs/
- https://react-bootstrap.github.io/components/navbar/
I'm trying to build a navigation bar, but getting the following error:
Unhandled Runtime Error
TypeError: _camelize.default is not a function
http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js [:41:55]
pascalCase@http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:41:55
createWithBsPrefix@http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:48:51
Navbar_1<@http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:603:50
createCommonjsModule@http://localhost:8080/_snowpack/pkg/react-bootstrap.v1.5.2/common/createChainedFunction-36b17a02.js:14:5
@http://localhost:8080/_snowpack/pkg/react-bootstrap.Navbar.v1.5.2.js:570:36
This is not the first use of react-bootstrap components on this project - others have worked fine. The problem started specifically on usage of these components (Navbar and Nav).
As far as I'm aware I've got all the necessary JS in my index.jsx
(from: https://react-bootstrap.github.io/getting-started/introduction/):
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'jquery/dist/jquery.min.js';
and the necessary scripts in my index.html
(from: https://react-bootstrap.github.io/getting-started/introduction/#browser-globals):
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin </script>
<script>var Alert = ReactBootstrap.Alert;</script>
The code:
import React from 'react';
import '../src/App.css';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
class Navigation extends React.Component {
constructor(props) {
super(props)
this.state={}
}
render () {
return (
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href='#home'>Text</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href='#home'>Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
};
}
So I'm lost as to where this error is occurring? Am I missing a js file somewhere?