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

Hello,

When i try to import Button and Collapse, i get:

Import: import { Button, Collapse } from 'mdbreact';

Error: Module not found: Can't resolve 'mdbreact' in 'C:\wamp64\www\bob-web\notice-cmi\src\components\Collapsable'

I installed it with npm. Did i miss something ?

Context I develop an SPA app with React 16.2.0. I'm using the last version of mdbreact : 4.1.0 I would like to use the Navbar component.

Steps to reproduce

1. Create a test project npx react-create-app test-issue

2. Check if the react version is >= 16.0.0

3. In App.js, replace the content with the followings

import logo from './logo.svg';
import './App.css';
import { Navbar } from 'mdbreact'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar color="indigo" dark expand="md" fixed="top" scrolling>
          </Navbar>
      </div>
    );
  }
}

export default App;`
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from 'mdbreact'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar color="indigo" dark expand="md" fixed="top" scrolling>
          </Navbar>
      </div>
    );
  }
}

export default App;

4. Launch the app npm start

5. An error is display

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

Problem

After some deeply research, I found the source of the trouble. https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/65b8f6b66559ed6bbaed5eff3c485d355e724e2a/src/components/Navbar.js#L75

String is not anymore accepted for ref. You can have a look on the official documentation of React : https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

According to the above informations and the changelog (cf https://github.com/facebook/react/blob/master/CHANGELOG.md), it is very much possible that the functionnalty was deleted.

its mentioned that version 4.1.0 is updated for React 16. but its package.json have dependency : "react": "^15.6.1", "react-dom": "^15.6.1",

which cause multiple node_module installation dependency error:

invariant.js:42 Uncaught 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). at invariant (invariant.js:42) at coerceRef (react-dom.development.js:6736) at reconcileSingleElement (react-dom.development.js:7532) at reconcileChildFibers (react-dom.development.js:7635) at reconcileChildrenAtExpirationTime (react-dom.development.js:7756) at reconcileChildren (react-dom.development.js:7747) at finishClassComponent (react-dom.development.js:7881) at updateClassComponent (react-dom.development.js:7850) at beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224)

First, I installed mdbreact package from npm. After adding the Component it is showing the following error. My React version is 16.12.0. Attempted import error: 'MDBAvatar' is not exported from 'mdbreact'.

Can anyone help me to resolve this issue?

Expected behavior

When adding mdbreact to my existing project, expected it to run as is

Actual behavior

I get the error

Error: Cannot find module './factoryWithThrowingShims' from '/Users/.../node_modules/mdbreact/dist'

Your working environment and MDB version information

Node : v7.3.0 NPM : 5.5.1 React : Both 15.6.1 and 16 mdbreact : both via npm install (4.2.0) and git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git

I am using Browserify and babelify to parse JS with babel-preset-env and babel-preset-react

Resources (screenshots, code snippets etc.)

> browserify index.js -t [ babelify --presets [ env react ] ] -o build/web-bundle.js

Error: Cannot find module './factoryWithThrowingShims' from '/Users/.../node_modules/mdbreact/dist'
    at /Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:111:15)

Hi I'm trying to do https://mdbootstrap.com/docs/react/tables/additional/ like this but with select all option. But I can't able to achieve this using mdb bootstrap. May I get any help on this or any documentation?

I am facing issue in MDBDropdown component from the mdb-react-ui-kit package while using it with react-styleguidist. Here when I click on Search Options the component disappears and shows error in console.

NOTE - I am using react version 17.0.2 and the latest version of mdb-react-ui-kit

Using checkbox in 'MDBDataTable' with pagination there is one issue with it... When I click on checkbox of a particular position of data table (For example 1st row of the data table) of 1st page, than checkbox of all other pages automatically selected at same position.

Means if I check any checkbox of any row of any page, its automatically checked same position(row) of all other pages.

I'm trying to use mdbreact in a existig project with NextJs. This is the code:

import React from 'react';
import { Col, Container, Row, Footer } from 'mdbreact';

class FooterPage extends React.Component {
    render(){
        return(
            <Footer color="stylish-color-dark" className="font-small pt-4 mt-4">
                <Container className="text-center text-md-left">
                    <Row className="text-center text-md-left mt-3 pb-3">
                        <Col md="3" lg="3" xl="3" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Company name</h6>
                            <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="2" lg="2" xl="2" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Products</h6>
                            <p><a href="#!">MDBootstrap</a></p>
                            <p><a href="#!">MDWordPress</a></p>
                            <p><a href="#!">BrandFlow</a></p>
                            <p><a href="#!">Bootstrap Angular</a></p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="3" lg="2" xl="2" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Useful links</h6>
                            <p><a href="#!">Your Account</a></p>
                            <p><a href="#!">Become an Affiliate</a></p>
                            <p><a href="#!">Shipping Rates</a></p>
                            <p><a href="#!">Help</a></p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="4" lg="3" xl="3" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Contact</h6>
                            <p><i className="fa fa-home mr-3"></i> New York, NY 10012, US</p>
                            <p><i className="fa fa-envelope mr-3"></i> [email protected]</p>
                            <p><i className="fa fa-phone mr-3"></i> + 01 234 567 88</p>
                            <p><i className="fa fa-print mr-3"></i> + 01 234 567 89</p>
                        </Col>
                    </Row>
                    <hr/>
                    <Row className="d-flex align-items-center">
                        <Col md="8" lg="8">
                            <p className="text-center text-md-left grey-text">&copy; {(new Date().getFullYear())} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a></p>
                        </Col>
                        <Col md="4" lg="4" className="ml-lg-0">
                            <div className="text-center text-md-right">
                                <ul className="list-unstyled list-inline">
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-facebook"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-twitter"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-google-plus"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </Col>
                    </Row>
                </Container>
            </Footer>
        );
    }
}
        
export default FooterPage;

And this is the error that is showing:

window is not defined
ReferenceError: window is not defined
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:23:1
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:12:1
    at module.exports (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:57:1)
    at Object.<anonymous> (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Waves.css?f181:12:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Waves.js:5:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Button.js:4:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/index.js:4:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/mdbreact.js:4868:18)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at module.exports (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:62:1)
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/mdbreact.js:76:10
    at webpackUniversalModuleDefinition (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/universalModuleDefinition

I've installed from 2 wayes:

• npm i --save mdbreact
• in package.json : "mdbreact": "git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade"

I will have made a mistake? Nobody uses yet mdbreact with NextJs? I think something happends in server side rendering. I'm not sure.

Thanks

when trying to close a modal i'm getting an error mdbreact.js:2046 Uncaught TypeError: Cannot read property 'contains' of undefined at Modal.handleBackdropClick

this is actually happens no matter where i click after the modal is open, clicking at the screen just invoking the error

inside my package.json

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

@smolenski-mikolaj :)