Npm build error for mdb-pro jquery

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Npm build error for mdb-pro jquery

gabrielmustiere pro asked 6 years ago

Hi,

I'm working with the latest version of mdbootstrap jquery pro that I downloaded in my account, and i wanted to install it through webpack. I followed all the steps and replaced the mdb folder containing the free version with the mdb-pro folder, at compile time I have errors regarding the path resolution of the `'../../img//lightbox/default-skin.png'` file in `vendors/mdb/scss`, an error I didn't have with the free version.

For information I made some changes on the folder naming that does not impact the project's tree structure, and I also updated the latest version of the extract-text-plugin with `npm i -D extract-text-webpack-plugin@next` because of a bug (solution found via the plugin github)

ERROR in ./assets/vendors/mdb/scss/mdb.scss
Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../img//lightbox/default-skin.png' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
at factory.create (/Users/gabrielmustiere/dev/poc/mdb/node_modules/webpack/lib/Compilation.js:796:10)
at factory (/Users/gabrielmustiere/dev/poc/mdb/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
at resolver (/Users/gabrielmustiere/dev/poc/mdb/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
at asyncLib.parallel (/Users/gabrielmustiere/dev/poc/mdb/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
at /Users/gabrielmustiere/dev/poc/mdb/node_modules/neo-async/async.js:2817:7
at /Users/gabrielmustiere/dev/poc/mdb/node_modules/neo-async/async.js:6783:13
at normalResolver.resolve (/Users/gabrielmustiere/dev/poc/mdb/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
at doResolve (/Users/gabrielmustiere/dev/poc/mdb/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
at hook.callAsync (/Users/gabrielmustiere/dev/poc/mdb/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/Users/gabrielmustiere/dev/poc/mdb/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
at resolver.doResolve (/Users/gabrielmustiere/dev/poc/mdb/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
at hook.callAsync (/Users/gabrielmustiere/dev/poc/mdb/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/Users/gabrielmustiere/dev/poc/mdb/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
at hook.callAsync (/Users/gabrielmustiere/dev/poc/mdb/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
at _fn0 (eval at create (/Users/gabrielmustiere/dev/poc/mdb/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
at resolver.doResolve (/Users/gabrielmustiere/dev/poc/mdb/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
@ ./assets/vendors/mdb/scss/mdb.scss

ERROR in ./assets/vendors/mdb/scss/mdb.scss
Module not found: Error: Can't resolve '../../img//lightbox/default-skin.png' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss 7:298299-298346

ERROR in ./assets/vendors/mdb/scss/mdb.scss
Module not found: Error: Can't resolve '../../img//lightbox/preloader.gif' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss 7:303932-303976

ERROR in ./assets/vendors/mdb/scss/mdb.scss
Module not found: Error: Can't resolve '../../img//svg/arrow_left.svg' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss 7:221018-221058

ERROR in ./assets/vendors/mdb/scss/mdb.scss
Module not found: Error: Can't resolve '../../img//svg/arrow_right.svg' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss 7:221147-221188
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!assets/scss/main.scss:
6 assets
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./assets/scss/main.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/scss/main.scss 203 KiB {0} [built]
[./node_modules/css-loader/lib/css-base.js] 2.21 KiB {0} [built]
[./node_modules/css-loader/lib/url/escape.js] 448 bytes {0} [built]
[./node_modules/font-awesome/fonts/fontawesome-webfont.eot] 75 bytes {0} [built]
[./node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0] 75 bytes {0} [built]
[./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0] 75 bytes {0} [built]
[./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0] 75 bytes {0} [built]
[./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0] 77 bytes {0} [built]
[./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0] 76 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!assets/vendors/mdb/scss/mdb.scss:
30 assets
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./assets/vendors/mdb/font/roboto/Roboto-Bold.woff] 74 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Bold.woff2] 75 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Light.eot] 74 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Light.ttf] 74 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Light.woff] 75 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Light.woff2] 76 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Medium.eot] 75 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Medium.ttf] 75 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Medium.woff] 76 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Medium.woff2] 77 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Regular.eot] 76 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Regular.ttf] 76 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Regular.woff] 77 bytes {0} [built]
[./assets/vendors/mdb/font/roboto/Roboto-Thin.eot] 73 bytes {0} [built]
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss 536 KiB {0} [built]
+ 18 hidden modules

ERROR in ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss)
Module not found: Error: Can't resolve '../../img//lightbox/default-skin.png' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss) 7:298299-298346

ERROR in ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss)
Module not found: Error: Can't resolve '../../img//lightbox/preloader.gif' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss) 7:303932-303976

ERROR in ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss)
Module not found: Error: Can't resolve '../../img//svg/arrow_left.svg' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss) 7:221018-221058

ERROR in ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss)
Module not found: Error: Can't resolve '../../img//svg/arrow_right.svg' in '/Users/gabrielmustiere/dev/poc/mdb/assets/vendors/mdb/scss'
@ ./assets/vendors/mdb/scss/mdb.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/vendors/mdb/scss/mdb.scss) 7:221147-221188
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html] 793 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

 

Jakub Mandra staff premium answered 6 years ago

Hello, We were working for some time on this problem. The paths in scss/core/_variables.scss to /img folder have to be changed to work with compiler. 
$image-path: "../../img/" !default; ---> $image-path: "../img/" !defaul
But if you downloaded package via npm it is not possible. We recommend to use gulp, not webpack for now... But in next Tuesday new version of MDB will be released and that problem should not occur anymore! Thank you for posting. Best regards, Jakub from MDB

gabrielmustiere pro answered 6 years ago

Hi, I just want to use webpack in my stack and not include gulp, I’ll wait until Friday to see the evolution you’re talking about. Do you have anything planned about the installation tutorial with webpack? Have you ever thought about adding mdb-pro as a private npm/yarn dependency? I believe it is possible to download packages in private repos using a token system. Br, Gabriel.

Jakub Mandra staff premium commented 6 years ago

Hi, thanks for the patience :) For now we are happy with the git solution, its much safer. But it is an interesting prompt which i will send to tasks to considerate. Keep hacking :) Jakub from MDB
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 jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
gabrielmustiere
Pro User
10Support score
3Questions 3Answers
0Snippets likes 0Snippets