Webpack problem on JS

  1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Webpack problem on JS

Neanrakyr pro asked 4 years ago

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

Hello, I just install the new MDB5 PRO version

I download the MDB-UI-KIT-PRO-Essential-1.0.0.zip, I extract the src folder on my project (node_module is install too with "npm install".

them on my webpack

I add it :

mix.js('resources/js/mdb/mdb-pro.js', 'public/js') .sass('resources/sass/mdb/mdb-pro.scss', 'public/css');

When I run "npm run prod"

the SCSS is perfectly work but the js not working.

ERROR in ./resources/js/mdb/pro/timepicker/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: {Folder}\resources\js\mdb\pro\timepicker\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (1723:32):

ERROR in ./resources/js/mdb/pro/charts.js Module not found: Error: Can't resolve 'chart.js' in '{Folder}\resources\js\mdb\pro' @ ./resources/js/mdb/pro/charts.js 13:0-44 308:26-33 @ ./resources/js/mdb/mdb-pro.js @ multi ./resources/js/mdb/mdb-pro.js ./resources/sass/mdb/mdb-pro.scss

ERROR in ./resources/js/mdb/free/input.js Module not found: Error: Can't resolve 'detect-autofill' in '{Folder}\resources\js\mdb\free' @ ./resources/js/mdb/free/input.js 12:0-25 @ ./resources/js/mdb/mdb-pro.js @ multi ./resources/js/mdb/mdb-pro.js ./resources/sass/mdb/mdb-pro.scss

ERROR in ./resources/js/mdb/pro/sidenav.js Module not found: Error: Can't resolve 'perfect-scrollbar' in '{Folder}\resources\js\mdb\pro' @ ./resources/js/mdb/pro/sidenav.js 33:0-49 538:35-51 @ ./resources/js/mdb/mdb-pro.js @ multi ./resources/js/mdb/mdb-pro.js ./resources/sass/mdb/mdb-pro.scss

ERROR in chunk /js/mdb-pro [entry] /js/mdb-pro.js

Can you help me to fixed it?

Mikołaj Smoleński staff answered 4 years ago

Hi there,

We prepared the Webpack Starter with MDB UI KIT already installed. Maybe it will help to resolve your issue.

To install MDB PRO you will just need to change the following line in package.json:

"dependencies": {
    "mdb-ui-kit": "1.0.0"
  }

to

"dependencies": {
    "mdb-ui-kit": "git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential"
  }

or 

"dependencies": {
    "mdb-ui-kit": "PATH_TO_MDB_PRO_DIRECTORY"
  }

Best regards

Neanrakyr pro commented 4 years ago

It's not solved my problem, it's just try to bypass it with another way.

on my project I deny the auto update from package who are not certificated safe by the company.

That why I download your package manually and install it by myself.

I do it for MDB 4 Jquery version and have no problem with that. But the problem is there for MDB 5. I cannot mix the js, but the mix for the css work fine.

Mikołaj Smoleński staff commented 4 years ago

Using files from src folder is at your own risk. It requires proper configuration of the project and installing the missing dependencies. If there are such problems, the only thing I can recommend is to use production files (mdb.min.js and mdb.min.css) which don't need any additional configuration to work.

Best regards
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 Standard
  • MDB Version: 1.0.0
  • Device: Desktop / Mobile
  • Browser: Any
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
webpack
Related topics
3
Issue with 4.9.0 + webpack + typescript
2
Create builds with rollup instead of webpack
1
Webpack Support ETA?
1
How to build MDB v4.16.0 with Laravel Mix
0
Can't build with webpack
About author
Neanrakyr
Pro User
82Support score
17Questions 2Answers
0Snippets likes 1Snippets