“TypeError: _camelize.default is not a function” in React-Bootstrap

时间:2021-04-06 13:11:56

标签: reactjs react-bootstrap snowpack react-bootstrap-nav

使用来自以下方面的预构建组件:

  1. https://react-bootstrap.github.io/components/navs/
  2. https://react-bootstrap.github.io/components/navbar/

我正在尝试构建导航栏,但收到以下错误:

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

这不是第一次在这个项目中使用 react-bootstrap 组件 - 其他人工作得很好。问题开始于这些组件(Navbar 和 Nav)的使用。

据我所知,我的 index.jsx 中有所有必要的 JS(来自: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';

以及我的 index.html 中的必要脚本(来自: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>

代码

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>
    )
  };
}

所以我不知道这个错误发生在哪里?我是不是在某处遗漏了一个 js 文件?

0 个答案:

没有答案