"Cannot convert undefined or null to object" when using "Collapse" in "reactstrap" navbar

Question

I looked for a solution for awhile and could not find one for my situation. Please bear with me I am still learning. I am trying to add a Navbar to my react app that uses Next.js and reactstrap. I have included the component, console log, and package.json

Navbar React Component

 import React from "react"; import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from "reactstrap"; export default class Navbarr extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isOpen: false }; } toggle() { this.setState({ isOpen: !this.state.isOpen }); } render() { return ( <div> <Navbar color="light" light expand="md"> <NavbarBrand href="/">reactstrap</NavbarBrand> <NavbarToggler onClick={this.toggle} /> <Collapse isOpen={this.state.isOpen} navbar> <Nav className="ml-auto" navbar> <NavItem> <NavLink href="/components/">Components</NavLink> </NavItem> <NavItem> <NavLink href="/"> GitHub </NavLink> </NavItem> <UncontrolledDropdown nav inNavbar> <DropdownToggle nav caret> Options </DropdownToggle> <DropdownMenu right> <DropdownItem>Option 1</DropdownItem> <DropdownItem>Option 2</DropdownItem> <DropdownItem divider /> <DropdownItem>Reset</DropdownItem> </DropdownMenu> </UncontrolledDropdown> </Nav> </Collapse> </Navbar> </div> ); } }

Console.log

 Cannot convert undefined or null to object TypeError: Cannot convert undefined or null to object at Function.getOwnPropertyDescriptors (<anonymous>) at _objectSpread (/Users/neilskaria/Projects/projectb/node_modules/reactstrap/node_modules/@babel/runtime/helpers/objectSpread.js:19:46) at /Users/neilskaria/Projects/projectb/node_modules/reactstrap/lib/Collapse.js:146:43 at Transition.render (/Users/neilskaria/Projects/projectb/node_modules/react-transition-group/Transition.js:418:14) at processChild (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:2863:18) at resolve (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5) at ReactDOMServerRenderer.render (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22) at ReactDOMServerRenderer.read (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29) at renderToString (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3526:27) at renderPage (/Users/neilskaria/Projects/projectb/node_modules/next/dist/server/render.js:319:26) at Function.getInitialProps (/Users/neilskaria/Projects/projectb/node_modules/next/dist/server/document.js:65:25) at _callee$ (/Users/neilskaria/Projects/projectb/node_modules/next/dist/lib/utils.js:86:30) at tryCatch (/Users/neilskaria/Projects/projectb/node_modules/regenerator-runtime/runtime.js:62:40) at Generator.invoke [as _invoke] (/Users/neilskaria/Projects/projectb/node_modules/regenerator-runtime/runtime.js:288:22) at Generator.prototype.(anonymous function) [as next] (/Users/neilskaria/Projects/projectb/node_modules/regenerator-runtime/runtime.js:114:21) at asyncGeneratorStep (/Users/neilskaria/Projects/projectb/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)

package.json

 { "name": "projectb", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start -p $PORT", "heroku-postbuild": "npm run build", "test": "echo \\"Error: no test specified\\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@zeit/next-css": "^1.0.1", "bootstrap": "^4.2.1", "next": "^7.0.2", "react": "^16.7.0", "react-dom": "^16.7.0", "reactstrap": "^7.1.0" } }

Answer 1

Apparently there is a bug in Reactstrap:

https://github.com/reactstrap/reactstrap/issues/1373

The fix is to reinstall the package after deleting your json-lock file.

You can see:

modifying the ^ with a ~ in package-lock.json

from this fix:

https://github.com/reactstrap/reactstrap/issues/1373#issuecomment-456229877