1

Using pre-built components from:

  1. https://react-bootstrap.github.io/components/navs/
  2. 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?

MB141
  • 114
  • 1
  • 7
  • You don't need jQuery and bootstrap.js. Just bootstrap CDN and react-bootstrap package should do. But before writing the answer what are you using jQuery and bootstrap.js for? – Aamin Khan Apr 09 '21 at 18:05
  • Why are you importing via `import` and `script` both? In simple terms just ensure the packages are installed using `npm install react-bootstrap bootstrap` and then use it in your App.js. The Browser Globals are not needed and also importing JQuery is not needed. – Nagaraj Tantri Apr 14 '21 at 14:12

0 Answers0