Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBSelect not working

innovative23 pro asked 6 years ago


The MDBSelect components aren't working for me. I updated the the package.json file to have the latest 4.8.1 update. ran npm install --save mdbreact. But receive a number of errors. Even after grabbing the MDBSelect examples. ``` import React, { Component } from "react"; import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption, } from "mdbreact"; class SelectPage extends Component { render() { return ( <div> <MDBSelect multiple> <MDBSelectInput selected="Choose your option" /> <MDBSelectOptions> <MDBSelectOption disabled>Choose your option</MDBSelectOption> <MDBSelectOption value="1">Option nr 1</MDBSelectOption> <MDBSelectOption value="2">Option nr 2</MDBSelectOption> <MDBSelectOption value="3">Option nr 3</MDBSelectOption> </MDBSelectOptions> </MDBSelect> <label>Example label</label> </div> ); } } export default SelectPage;

innovative23 pro commented 6 years ago

Does MDBSelect work for anyone else?

goldfarbdev priority answered 6 years ago


I had the same problem.  I properly installed the pro version with a yarn add, not forgetting to include my token in the mdbreact:... in package.json.

The real culprit in the end though was in my index.js.  I'm not sure, but in comparing the pro zip download (MDB-React-Pro-npm) to my original free version, the order of imports for the css was different.

WRONG:

import './index.scss';
import App from './App';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

Correct

import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.scss';
import App from './App';

Jakub Mandra staff commented 6 years ago

Yes, imports of mdbreact styles must be included Before components. Its because those files are loaded synchronously from top to bottom.


Anna Morawska staff answered 6 years ago


Hi innovative23, Select is a PRO component , and it looks like you installed FREE version by running npm install mdbreact (only the free version is available on npm). If you have a PROversion,, you have to install it from gitlab. It is described in our 5min quick start, here. (you have to switch to pro tab). Please alter this line
"mdbreact": "^4.8.1"
into
"mdbreact": "git+https://oauth2:<YOUR TOKEN HERE>@git.mdbootstrap.com/mdb/react/re-pro.git"
Don't forget to put your token there. Then run npm install It should help. Best, Ania

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No