我正在尝试运行应用程序的生产版本,并且在构建它之后,“下一个启动”失败。我在/node_modules/react-overlays/DropdownToggle.js:36:22
中收到状态为“无法读取未定义的属性'show'的未定义”的错误运行开发版本很好,一旦我删除了“ NavDropDown”组件,一切都将正常运行。在这种情况下,我可以在构建后使用“ npm run start”或“ next start”命令。
import Header from './header';
import Link from 'next/link';
import { Navbar, Nav, NavDropdown, Form, FormControl, Button } from 'react-bootstrap';
//Top navigation of the application
function Navigation() {
return (
<div className="navigationHeader">
<Header />
<Navbar collapseOnSelect expand="lg" bg="primary" variant="dark" fixed="top">
<Link href="/" prefetch>
<a>
<Navbar.Brand>
My Application
</Navbar.Brand>
</a>
</Link>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
{/* Trouble code below */}
<NavDropdown title="Account" id="collasible-nav-dropdown">
<NavDropdown.Item href="/admin" disabled>Admin</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/my-account" disabled>My Account</NavDropdown.Item>
<NavDropdown.Item href="/register">Register</NavDropdown.Item>
<NavDropdown.Item href="/login">Login</NavDropdown.Item>
</NavDropdown>
{/* End of trouble code */}
<Nav.Link href="/browse" disabled>Browse</Nav.Link>
<Nav.Link href="/services">Manage Services</Nav.Link>
<Nav.Link eventKey={2} href="/cart" className="mr-sm-2" disabled>
Cart
</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" disabled />
<Button variant="success" disabled>Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
);
}
export default Navigation;
回顾一下,我可以运行npm run dev'next',也可以运行npm run build而没有问题。一旦我运行npm run start'next start'并连接到端口,应用程序就会崩溃,并在/node_modules/react-overlays/DropdownToggle.js:36:22 <中显示错误“无法读取未定义的属性'show'”。 / p>
但是,如果删除故障代码,则一切正常。有任何想法吗?我是否在组件中缺少参数?我只是关注了react-bootstrap文档。
谢谢。 :)