Not being able to use MDB React PRO

Topic: Not being able to use MDB React PRO

marcelosramos pro asked 6 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

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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 <code>create-react-app your-app-name-here</code> or <code>npx create-react-app your-app-name-here)</code>; 
2. Enter the directory (<code>cd your-app-name-here</code>) 
3. <code>yarn add font-awesome@4.7.0 --exact</code> 
4. <code>yarn add bootstrap@4.0.0 --exact</code> 
5. <code>yarn add react-error-overlay@4.0.0 --exact</code> 
6. Add the dependency to <code>package.json</code>:
<pre>"re-pro": "git+http://git.mdbootstrap.com/mdb/react/re-pro.git#dev",</pre>
7. <code>yarn</code> 
8. Import the files within <code>src/index.js</code> (after <code>import ReactDOM...</code>):
<pre>import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 're-pro/dist/css/mdb.css';</pre>
9. Import the MDB PRO stuff into your <code>App.js</code> file and enjoy!
With Best Regards, 
Kuba

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

marcelosramos

Pro User 10Support score
1Questions 1Answers 0Snippets