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

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

dzu priority asked 10 months 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 **

Add comment

bmtglobal free answered 10 months ago

0 0 Best answer

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 10 months ago

Hello,

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

Keep coding

bmtglobal free commented 10 months ago

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

Add comment

dzu priority answered 10 months ago

0 0 Best answer

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 10 months 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.

Add comment

Mateusz Lazaru staff answered 10 months ago

0 0 Best answer

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

<p>Try this modified code and let me know if it helped:</p>

<pre class="prettyprint"><code>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>
            <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>
  );
}
</code></pre>

Please insert min. 20 characters.

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

Add comment

Closed

This topic is closed.

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

dzu

0Support score
1Questions 1Answers 0Snippets