Not working with create-react-app

[shilu911]

I get the following error:

./node_modules/mdbreact/src/components/TextField.js Module parse failed: Unexpected token (101:6) You may need an appropriate loader to handle this file type.	icon,	iconClass,	...attributes	} = this.props;

[matheusbaba]

I have the same problem. Any help?

[smolenski-mikolaj]

We've made a new release and that issue should be fixed. Please contact us if problem still exists.

Regards

[amanwar]

I see the same problem with 4.1.0 release.

[mattonit]

How do you get this error? Could you please share your sample code?

[huynhsamha]

Hello everyone, I also get the same problem. I want to use mdbreact in my app made by create-react-app, I tried use:

npm install --save mdbreact

and I tried using component Button in my react:

import React from 'react';
import {Button} from 'mdbreact';

class MyButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Button color="elegant">Elegant</Button>
      </div>
    );
  }
}

export default MyButton;

but my browser catch me following error:

Element ref was specified as a string (ripple) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

10 | import App from './App'; 11 | import registerServiceWorker from './registerServiceWorker'; 12 | > 13 | ReactDOM.render(, document.getElementById('root')); 14 | registerServiceWorker(); 15 | 16 |

I would like to use mdbreact as one package dependency in my project, not clone and start your project as your instructions. How can you help me my problem? Thanks!

[smolenski-mikolaj]

Hello, This is error which is connected with the latest upgrade of React. We've fixed it by updating our product to the latest React versionl. Please delete mdbreact from package.json and add to dependencies this line:

"mdbreact":"git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade"

We'll fix it also in the next update of mdbreact in npm.

Regards

[huynhsamha]

Hi @smolenski-mikolaj, Thanks for your reply. I did as your answer, and it didn't get the error I got before.

But I also import your css in my App.js by line import 'mdbreact/docs/css/mdb.css';, it maybe silly when I import css from /docs/. Is it correct? Beause I didn't see any file css in folder /dist/, so I think should import from /docs/

Moreover, I got new error when I use your components, as Modal, I did as your document from https://mdbootstrap.com/react/javascript/modals/ by the following lines

import React from 'react';
import { Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';

class ModalPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <div>
        This is Modal
        <Button color="primary" onClick={this.toggle}>Launch demo modal</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>This is body</ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
            <Button color="primary" onClick={this.toggle}>Save changes</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalPage;

Everything is fine until I click the button, everything is gone, nothing appears. I saw my console from browser, it show errors:

At: mdbreact.js:10807

Uncaught TypeError: Cannot read property 'parentNode' of undefined at Modal.renderIntoSubtree (mdbreact.js:10807) at Modal.show (mdbreact.js:10773) at Modal.togglePortal (mdbreact.js:10727) at Modal.componentDidUpdate (mdbreact.js:10664) at commitLifeCycles (react-dom.development.js:8778) at commitAllLifeCycles (react-dom.development.js:9946) at HTMLUnknownElement.callCallback (react-dom.development.js:542) at Object.invokeGuardedCallbackDev (react-dom.development.js:581) at invokeGuardedCallback (react-dom.development.js:438) at commitRoot (react-dom.development.js:10050) at performWorkOnRoot (react-dom.development.js:11017) at performWork (react-dom.development.js:10967) at batchedUpdates (react-dom.development.js:11086) at batchedUpdates (react-dom.development.js:2330) at dispatchEvent (react-dom.development.js:3421)

At index.js:2178

The above error occurred in the component: in Modal (at ModalPage.jsx:26) in div (at ModalPage.jsx:23) in ModalPage (at App.js:32) in div (at App.js:23) in App (at index.js:14)

I do not know what mistakes I made. Hope you can help me this problem.

Thanks all!

[smolenski-mikolaj]

You can import css files from docs, it's correct. You can also import them from our cdn. Reffering to the error, can You check wchich version of React You have in package.json?

[huynhsamha]

Hi @smolenski-mikolaj, Now I am using React version 16.2.0, made from create-react-app. Can it help you detect my error? Thanks!

[smolenski-mikolaj]

Hi, Can You also check which version of React is in node_modules/mdbreact/package.json. It's interesting, because the latest update fixed Your issue. That's why I'm asking about a version.

Regards

[huynhsamha]

In node_modules/mdbreact/package.json, my react version is also 16.2.0 and it still not working with my create-react-app

[shams-ali]

+1

[smolenski-mikolaj]

Please add again mdbreact from github. Modal should work without errors. https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/issues/15

[sushantsaurav]

I'm also getting the same error, even after adding the said line in package.json.

[smolenski-mikolaj]

It should work properly. Are You sure that You're uninstalling it from Your app and then installing the new version? If You have the same error, so it must be still the same version of mdbreact.

[mazinchess]

Hi @smolenski-mikolaj.

I'm trying to use the cascade style inside a Card component in this way:

<Card cascade>
                    <CardImage tag="div">
                        <div className="view gradient-card-header blue-gradient">
                            <h2 className="h2-responsive">Heading</h2>
                            <p>Subheading</p>
                        </div>
                    </CardImage>
                    <CardBody>
                        <form>
                            <p className="h5 text-center mb-4">Sign in</p>
                            <Input label="Type your email" icon="envelope" group type="email" validate error="wrong" success="right" />
                            <Input label="Type your password" icon="lock" group type="password" validate />
                            <div className="text-center">
                                <Button>Login</Button>
                            </div>
                        </form>
                    </CardBody>
                </Card>

The problem here is that styles view gradient-card-header blue-gradient are not working. I'm using the package directly from github and also I'm using a create-react-app generator.

Are those styles part of the Premium package??

Thanks in advance.

[smolenski-mikolaj]

Cascading cards are part of our MDB React Pro package.

Regards

[littlejeon]

Hi @smolenski-mikolaj,

When i run the install via npm and follow the directions from the bottom of this page https://mdbootstrap.com/react/5-min-quick-start/ bootstrap styles don't apply at all...

My node version is 8.4.0

Is there anything else I need to do to get the styles applied?

Thanks

[smolenski-mikolaj]

Hi @littlejeon,

You need to add css files to Your project: import 'bootstrap/dist/css/bootstrap.css' import 'mdbreact/dist/css/mdb.css'

We'll add those info to the guide soon.

[littlejeon]

Thanks @smolenski-mikolaj

Importing the css files to my index.js worked perfectly!

[TTSJohn]

Hi, I am having a similar issue, this is my package.json

{ "name": "mdbtest", "version": "0.1.0", "private": true, "dependencies": { "mdbreact":"git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade", "react": "^16.4.0", "react-dom": "^16.4.0", "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

This is my error message

./src/components/Navigation.js Module not found: Can't resolve 'mdbreact' in '/Users/johnmoranski/Desktop/tutor/mdbTest/mdbtest/src/components'

Can you provide insight as to what I may be doing incorrectly?

Thank you for your help!

[JStrebeyko]

Hi there @TTSJohn , Please paste the use case, if you say it is something similar then perhaps a PRO component is attempted to be imported while not there. Best, Kuba

[TTSJohn]

Thank you, I used the example from the website. My code is below

import React, { Component } from 'react'; import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';

class NavbarFeatures extends React.Component { constructor(props) { super(props); this.state = { collapse: false, isWideEnough: false, dropdownOpen: false }; this.onClick = this.onClick.bind(this); this.toggle = this.toggle.bind(this); }

onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
}

toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
}

render() {
    return (

            <Navbar color="indigo" dark expand="md" scrolling>
                <NavbarBrand href="/">
                    <strong>Navbar</strong>
                </NavbarBrand>
                { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
                <Collapse isOpen = { this.state.collapse } navbar>
                    <NavbarNav left>
                      <NavItem active>
                          <NavLink to="#">Home</NavLink>
                      </NavItem>
                      <NavItem>
                          <NavLink to="#">Features</NavLink>
                      </NavItem>
                      <NavItem>
                          <NavLink to="#">Pricing</NavLink>
                      </NavItem>
                      <NavItem>
                          <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                          <DropdownToggle nav caret>Dropdown</DropdownToggle>
                          <DropdownMenu>
                              <DropdownItem href="#">Action</DropdownItem>
                              <DropdownItem href="#">Another Action</DropdownItem>
                              <DropdownItem href="#">Something else here</DropdownItem>
                              <DropdownItem href="#">Something else here</DropdownItem>
                          </DropdownMenu>
                          </Dropdown>
                      </NavItem>
                    </NavbarNav>
                    <NavbarNav right>
                      <NavItem>
                        <form className="form-inline md-form mt-0">
                          <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/>
                        </form>
                      </NavItem>
                    </NavbarNav>
                </Collapse>
            </Navbar>
    );
}

}

export default NavbarFeatures;

[TTSJohn]

Here is the welcome page it would direct too. I have not called the NavbarFeatures component yet in the code but I don't think that is causing the issue

import React, {Component} from 'react'; import '../css/Welcome.css'; import NavbarFeatures from './Navigation.js';

class Welcome extends Component { constructor(){ super();

};

render(){ return(

Hello

            );
}

}

export default Welcome;

[JStrebeyko]

Hi @TTSJohn , You said you had similar problem, but I am not sure what the problem is, as there were already at least few mentioned in here. Could you please elaborate some more on the desired output or create a fresh support ticket? Pasting your code into our App proved it works fine on my end. Best, Kuba

[TTSJohn]

Hi, This is the error message I keep receiving. It looks like others on this post have got the same error message.

This is my error message

./src/components/Navigation.js Module not found: Can't resolve 'mdbreact' in '/Users/johnmoranski/Desktop/tutor/mdbTest/mdbtest/src/components'

[JStrebeyko]

Hi, No one in this ticket got the same error message. People here encountered issues with parsing and CSS, yours is obviously a component import method problem. Please create a new issue to avoid further confusion.

[abrehamgezahegn]

Hey, I have just started using mdbReact and I love it. I am using react to build my projects. And i have problems using the icons and the hover effect on images. Is there any import that I have to do or something? please help me out