Topic: Query about (MDB5-REACT-UI-KIT-Pro-Advanced-6.1.0)

dzu priority asked 1 year ago


Hello I have a MDB React Pro license, I have used in the package.json

{
  "name": "mdb-react-admin-templates",
  "version": "1.6.0",
  "description": "Pack of templates for mdb-react-ui-kit",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.0.0",
    "mdb-react-file-upload": "./plugins/file-upload.tgz",
    "mdb-react-table-editor": "./plugins/table-editor.tgz",
    "mdb-react-ui-kit": "./mdb-react-ui-kit-6.1.0.tgz",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "tslib": "^2.3.1",
    "web-vitals": "^0.2.4"
  },

I want to use the following code for a Navbar

import React, { useState } from "react";
import {
  MDBContainer,
  MDBNavbar,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBBtn,
  MDBInputGroup,
  // MDBInputGroupText,
  // MDBInputGroupElement,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBDropdownLink,
  MDBDropdownDivider,
  MDBBadge,
} from "mdb-react-ui-kit";

export default function Navbar({ updateSidenav, sidenavState }) {
  return (
    <MDBNavbar id="main-navbar" expand="lg" light fixed="top" bgColor="light">
      <MDBContainer fluid>
        <MDBBtn
          onClick={() => updateSidenav(!sidenavState)}
          className="shadow-0 p-0 me-3 d-block d-xxl-none"
          color="light"
        >
          <MDBIcon icon="bars" size="lg" fas />
        </MDBBtn>

        <MDBInputGroup
          textAfter={<MDBIcon icon="search" fas />}
          className="d-none d-md-flex w-auto my-auto"
        >
          <input
            type="search"
            className="form-control"
            placeholder='Search (ctrl + "/" to focus)'
            style={{ minWidth: "225px" }}
          />
        </MDBInputGroup>

        <MDBNavbarNav className="ms-auto d-flex flex-row">
          <MDBNavbarItem>
            <MDBDropdown>
              <MDBDropdownToggle
                style={{ cursor: "pointer" }}
                tag="a"
                className="nav-link me-3 me-lg-0 hidden-arrow"
              >
                <MDBIcon icon="bell" fas />
                <MDBBadge pill notification color="danger">
                  1
                </MDBBadge>
              </MDBDropdownToggle>
              <MDBDropdownMenu style={{ zIndex: 1060 }}>
                <MDBDropdownItem>
                  {/* <MDBDropdownLink>Some news</MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                  {/* <MDBDropdownLink>Another news</MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>Something else here</MDBDropdownLink> */}
                </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavbarItem>

          <MDBNavbarItem>
{/*             <MDBNavbarLink className="me-3 me-lg-0" href="#">
              <MDBIcon fas icon="fill-drip" />
            </MDBNavbarLink> */}
          </MDBNavbarItem>

          <MDBNavbarItem>
 {/*            <MDBNavbarLink className="me-3 me-lg-0" href="#">
              <MDBIcon fab icon="github" />
            </MDBNavbarLink> */}
          </MDBNavbarItem>

          <MDBNavbarItem>
            <MDBDropdown>
              <MDBDropdownToggle
                style={{ cursor: "pointer" }}
                tag="a"
                className="nav-link me-3 me-lg-0 hidden-arrow"
              >
                <MDBIcon flag="uk" fas />
              </MDBDropdownToggle>
              <MDBDropdownMenu style={{ zIndex: 1060 }}>
                <MDBDropdownItem>
{/*                   <MDBDropdownLink>
                    <MDBIcon flag="uk" fas /> English{" "}
                    <MDBIcon icon="check" className="text-success ms-2" />
                  </MDBDropdownLink> */}
                </MDBDropdownItem>

                 {/* <MDBDropdownDivider />  */}

                <MDBDropdownItem>
                  {/* <MDBDropdownLink>
                    <MDBIcon flag="pl" fas /> Polski
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>
                    <MDBIcon flag="cn" fas /> 中文
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>
                    <MDBIcon flag="jp" fas /> 日本語
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>
                    <MDBIcon flag="de" fas /> Deutsch
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>
                    <MDBIcon flag="fr" fas /> Français
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>
                    <MDBIcon flag="es" fas /> Español
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                  {/* <MDBDropdownLink>
                    <MDBIcon flag="ru" fas /> Русский
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                  {/* <MDBDropdownLink>
                    <MDBIcon flag="pt" fas /> Português
                  </MDBDropdownLink> */}
                </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavbarItem>

          <MDBNavbarItem>
            <MDBDropdown>
              <MDBDropdownToggle
                style={{ cursor: "pointer" }}
                tag="a"
                className="nav-link hidden-arrow d-flex align-items-center"
              >
                <img
                  src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                  className="rounded-circle"
                  style={{ height: 22 }}
                  alt=""
                />
              </MDBDropdownToggle>
              <MDBDropdownMenu style={{ zIndex: 1060 }}>
                <MDBDropdownItem>
                  {/* <MDBDropdownLink>My profile</MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                 {/*  <MDBDropdownLink>Settings</MDBDropdownLink> */}
                </MDBDropdownItem>
                <MDBDropdownItem>
                  {/* <MDBDropdownLink>Logout</MDBDropdownLink> */}
                </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavbarItem>
        </MDBNavbarNav>
      </MDBContainer>
    </MDBNavbar>
  );
}

** But I have the following error **

** ERROR in ./src/components/modules/Navbar.js 434:47-62 export 'MDBDropdownLink' (imported as 'MDBDropdownLink') was not found in 'mdb-react-ui-kit' (possible exportccordion, MDBAccordionItem, MDBAlert, MDBAnimatedNavbar, MDBAnimation, MDBAutocomplete, MDBBadge, MDBBreadcruBreadcrumbItem, MDBBtn, MDBBtnGroup, MDBCard, MDBCardBody, MDBCardFooter, MDBCardGroup, MDBCardHeader, MDBCar Failed to compile. Attempted import error: 'MDBDropdownDivider' is not exported from 'mdb-react-ui-kit' (imported as 'MDBDropdowr'). ERROR in ./src/components/modules/Navbar.js 165:45-63 export 'MDBDropdownDivider' (imported as 'MDBDropdownDivider') was not found in 'mdb-react-ui-kit' (possible : MDBAccordion, MDBAccordionItem, MDBAlert, MDBAnimatedNavbar, MDBAnimation, MDBAutocomplete, MDBBadge, MDBBr **

** Can you help me I await your response thank you very much **


bmtglobal free answered 1 year ago


Where are the newer version ZIP downloadble from? I can only gain access to MDB5 PRO 5.1.0 zip and git.


Adam Jakubowski staff commented 1 year ago

Hello,

You should now be able to download the latest version of the package

Keep coding


bmtglobal free commented 1 year ago

Hi Adam - This is till not the case - See order #142428


dzu priority answered 1 year ago


Hello

This code appears when unzip your material (MDB5-REACT-UI-KIT-Pro-Advanced-6.1.0) please check it.

I await your response

thank you very much


Mateusz Lazaru staff commented 1 year ago

don't import and don't use <MDBDropdownLink /> & <MDBDropdownDivider /> because they can't be found, and that is why your app crashes. Try to replace your code with the code I've sent in the previous answer, and it should work.


Mateusz Lazaru staff answered 1 year ago


Is this code copied from our documentation? The error says there is no export of <MDBDropdownLink /> <MDBDropdownDivider /> which is correct as we do not have such components. So if it comes from the docs, I'd be grateful for a link.

Try this modified code and let me know if it helped:

import React, { useState } from 'react';
import {
  MDBContainer,
  MDBNavbar,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBBtn,
  MDBInputGroup,
  // MDBInputGroupText,
  // MDBInputGroupElement,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBDropdownLink,
  MDBDropdownDivider,
  MDBBadge,
} from 'mdb-react-ui-kit';

export default function Navbar({ updateSidenav, sidenavState }) {
  return (
    <MDBNavbar id='main-navbar' expand='lg' light fixed='top' bgColor='light'>
      <MDBContainer fluid>
        <MDBBtn
          onClick={() => updateSidenav(!sidenavState)}
          className='shadow-0 p-0 me-3 d-block d-xxl-none'
          color='light'
        >
          <MDBIcon icon='bars' size='lg' fas />
        </MDBBtn>

        <MDBInputGroup textAfter={<MDBIcon icon='search' fas />} className='d-none d-md-flex w-auto my-auto'>
          <input
            type='search'
            className='form-control'
            placeholder='Search (ctrl + "/" to focus)'
            style={{ minWidth: '225px' }}
          />
        </MDBInputGroup>

        <MDBNavbarNav className='ms-auto d-flex flex-row'>
          <MDBNavbarItem>
            <MDBDropdown>
              <MDBDropdownToggle style={{ cursor: 'pointer' }} tag='a' className='nav-link me-3 me-lg-0 hidden-arrow'>
                <MDBIcon icon='bell' fas />
                <MDBBadge pill notification color='danger'>
                  1
                </MDBBadge>
              </MDBDropdownToggle>
              <MDBDropdownMenu style={{ zIndex: 1060 }}>
                <MDBDropdownItem link>Some news</MDBDropdownItem>
                <MDBDropdownItem link>Another news</MDBDropdownItem>
                <MDBDropdownItem link>Something else here</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavbarItem>

          <MDBNavbarItem>
            <MDBNavbarLink className='me-3 me-lg-0' href='#'>
              <MDBIcon fas icon='fill-drip' />
            </MDBNavbarLink>
          </MDBNavbarItem>

          <MDBNavbarItem>
            <MDBNavbarLink className='me-3 me-lg-0' href='#'>
              <MDBIcon fab icon='github' />
            </MDBNavbarLink>
          </MDBNavbarItem>

          <MDBNavbarItem>
            <MDBDropdown>
              <MDBDropdownToggle style={{ cursor: 'pointer' }} tag='a' className='nav-link me-3 me-lg-0 hidden-arrow'>
                <MDBIcon flag='uk' fas />
              </MDBDropdownToggle>
              <MDBDropdownMenu style={{ zIndex: 1060 }}>
                <MDBDropdownItem link>
                  <MDBIcon flag='uk' fas /> English <MDBIcon icon='check' className='text-success ms-2' />
                </MDBDropdownItem>

                {/* <MDBDropdownDivider /> */}
                <hr class='dropdown-divider'></hr>

                <MDBDropdownItem link>
                  <MDBIcon flag='pl' fas /> Polski
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='cn' fas /> 中文
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='jp' fas /> 日本語
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='de' fas /> Deutsch
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='fr' fas /> Français
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='es' fas /> Español
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='ru' fas /> Русский
                </MDBDropdownItem>
                <MDBDropdownItem link>
                  <MDBIcon flag='pt' fas /> Português
                </MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavbarItem>

          <MDBNavbarItem>
            <MDBDropdown>
              <MDBDropdownToggle
                style={{ cursor: 'pointer' }}
                tag='a'
                className='nav-link hidden-arrow d-flex align-items-center'
              >
                <img
                  src='https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg'
                  className='rounded-circle'
                  style={{ height: 22 }}
                  alt=''
                />
              </MDBDropdownToggle>
              <MDBDropdownMenu style={{ zIndex: 1060 }}>
                <MDBDropdownItem link>My profile</MDBDropdownItem>
                <MDBDropdownItem link>Settings</MDBDropdownItem>
                <MDBDropdownItem link>Logout</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavbarItem>
        </MDBNavbarNav>
      </MDBContainer>
    </MDBNavbar>
  );
}

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: google
  • OS: w10
  • Provided sample code: No
  • Provided link: No