Npm build error for mdb-pro jquery

Topic: Npm build error for mdb-pro jquery

gabrielmustiere pro asked 5 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//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.

Add comment

gabrielmustiere pro answered 5 years ago

0 0 Best answer

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 commented 5 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

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

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

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

gabrielmustiere

Pro User 10Support score
3Questions 3Answers 0Snippets