Not being able to use MDB React PRO

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Not being able to use MDB React PRO

marcelosramos pro asked 7 years ago

Hello, I used the create-react-app tool to create my app, and then copied the dist folder from MDB React Pro into my src folder. then I added an alias in my webpack config file: mdbreact: path.resolve('./src/dist/mdbreact') when I run npm start I get the following error: 
Failed to compile.
./src/dist/mdbreact.js  Line 10:     Unexpected use of 'self'                                                                                                                 no-restricted-globals
  Line 10:     Unexpected use of 'self'                                                                                                                 no-restricted-globals
  Line 390:    'DEBUG' is not defined                                                                                                                   no-undef  Line 3979:   Unexpected '!' in '!!../../node_modules/css-loader/index.js!./Waves.css'. Do not use import syntax to configure webpack loaders          import/no-webpack-loader-syntax
  Line 4175:   Unexpected '!' in '!!../../node_modules/css-loader/index.js!./ButtonGroup.css'. Do not use import syntax to configure webpack loaders    import/no-webpack-loader-syntax  Line 4403:   Unexpected '!' in '!!../../css-loader/index.js!./font-awesome.min.css'. Do not use import syntax to configure webpack loaders            import/no-webpack-loader-syntax  Line 4998:   Unexpected '!' in '!!../../node_modules/css-loader/index.js!./CarouselFade.css'. Do not use import syntax to configure webpack loaders   import/no-webpack-loader-syntax
  Line 11264:  'ComponentName' is not defined                                                                                                           no-undef
  Line 11996:  Unexpected '!' in '!!../../../node_modules/css-loader/index.js!./InputRange.css'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax
  Line 14579:  Unexpected use of 'self'                                                                                                                 no-restricted-globals
  Line 14579:  Unexpected use of 'self'                                                                                                                 no-restricted-globals
  Line 14579:  Unexpected use of 'self'                                                                                                                 no-restricted-globals
  Line 14579:  Unexpected use of 'self'                                                                                                                 no-restricted-globals
  Line 24372:  Unexpected '!' in '!!../../../node_modules/css-loader/index.js!./Fade.css'. Do not use import syntax to configure webpack loaders        import/no-webpack-loader-syntax
How can I solve this? What would be the best ways to use MBDReact in my apps? Regards, Marcelo

Jakub Strebeyko staff answered 7 years ago

Hi there Marcelo,

To use MDB React with CRA, please add the former as a dependency. The steps:

1. Create file structure with CRA (depending whether you have CRA installed globally, go for create-react-app your-app-name-here or npx create-react-app your-app-name-here);
2. Enter the directory (cd your-app-name-here)
3. yarn add font-awesome@4.7.0 --exact
4. yarn add bootstrap@4.0.0 --exact
5. yarn add react-error-overlay@4.0.0 --exact
6. Add the dependency to package.json:

"re-pro": "git+http://git.mdbootstrap.com/mdb/react/re-pro.git#dev",

7. yarn
8. Import the files within src/index.js (after import ReactDOM...):

import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 're-pro/dist/css/mdb.css';

9. Import the MDB PRO stuff into your App.js file and enjoy!

With Best Regards,
Kuba

Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
marcelosramos
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets