Topic: MDBDropdown crashes when within MDBNavbar

Mateox free asked 3 months ago


Expected behavior

Dropdown containing defined options should be shown when clicked / howered over dropdown button.

Actual behavior

Website crashes with error:


Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. at createFiberFromTypeAndProps (https://localhost:44484/static/js/bundle.js:43713:21) at createFiberFromElement (https://localhost:44484/static/js/bundle.js:43736:19) at createChild (https://localhost:44484/static/js/bundle.js:30638:32) at reconcileChildrenArray (https://localhost:44484/static/js/bundle.js:30927:29) at reconcileChildFibers (https://localhost:44484/static/js/bundle.js:31339:20) at reconcileChildren (https://localhost:44484/static/js/bundle.js:34625:32) at updateHostComponent (https://localhost:44484/static/js/bundle.js:35349:7) at beginWork (https://localhost:44484/static/js/bundle.js:36987:18) at beginWork$1 (https://localhost:44484/static/js/bundle.js:42718:18) at performUnitOfWork (https://localhost:44484/static/js/bundle.js:41876:16)


Resources (screenshots, code snippets etc.)

Used example provided in the documentation. It seems like the dropdown button behaves exactly the same however, the error is surpressed. https://mdbootstrap.com/docs/react/navigation/navbar/


Stanisław Jakubowski staff commented 2 months ago

Hi!

Could you provide a snippet (https://mdbootstrap.com/snippets/) or a github repository showing the problem? I've tested an example from our documentation and it works fine for me.

Keep coding!


bmurphy premium answered 2 months ago


I had the same issue when only a string was inside of my MDBDropdownItem. If you put jsx inside of it, it will not crash. For example:

This will crash:

<MDBDropdownItem link>Action</MDBDropdownItem>
<MDBDropdownItem link>Another action</MDBDropdownItem>
<MDBDropdownItem link>Something else here</MDBDropdownItem>

This will work:

<MDBDropdownItem link><p>Action</p></MDBDropdownItem>
<MDBDropdownItem link><p>Another action</p></MDBDropdownItem>
<MDBDropdownItem link><p>Something else here</p></MDBDropdownItem>

Stanisław Jakubowski staff commented 2 months ago

Hi!

Both examples work fine for me. Could you provide a snippet (https://mdbootstrap.com/snippets/) or a github repository so we can see the whole code?

Keep coding!


bmurphy premium commented 2 months ago

The error only occurs in version 4.1, so it looks like the issue was already resolved.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 4.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: Yes