Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Upgrading jq-pro 4.8.10 to 4.8.11 broke webpack

Julien Moulin free asked 5 years ago


Issue encountered when I run cmd npm run dev with 4.8.11 jQuery pro on Laravel 6 project. It works fine with 4.8.10.

Expected behavior

Compiled successfully

Actual behavior

Module not found: Error: Can't resolve 'mdbootstrap-pro'

Edit :

I tested with a fresh install of laravel 6 and the same error occurs with 4.8.11 and compile works fine with 4.8.10. Npm 5.6.0 & NodeJS 8.11.1.

package.json

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
    "axios": "^0.19",
    "babel-loader": "^8.0.6",
    "cross-env": "^5.1",
    "jquery": "^3.4.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "bootstrap": "^4.3.1",
    "mdbootstrap-pro": "git+https://oauth2:xxxxxxx@git.mdbootstrap.com/mdb/jquery/jq-pro.git#4.8.11",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.3.1",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10"
}
}

webpack.mix.js

const mix = require('laravel-mix');
// Extract common libs in vendor.js file
mix.extract(['lodash', 'popper.js', 'jquery', 'axios', 'bootstrap', 'mdbootstrap-pro'])
    .autoload({'jquery': ['window.$', 'window.jQuery', '$']})
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

resources/js/bootstrap.js

window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
require('bootstrap');
require('mdbootstrap-pro');

cli commands to reproduce error

npm install
npm run dev

console error log

ERROR in multi lodash popper.js jquery axios bootstrap mdbootstrap-pro
Module not found: Error: Can't resolve 'mdbootstrap-pro' in '/var/www/test_4.8.11/laravel'
 @ multi lodash popper.js jquery axios bootstrap mdbootstrap-pro /js/vendor[5]
ERROR in ./resources/js/bootstrap.js
Module not found: Error: Can't resolve 'mdbootstrap-pro' in '/var/www/test_4.8.11/laravel/resources/js'
 @ ./resources/js/bootstrap.js 13:0-26
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-10-25T07_40_02_717Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-10-25T07_40_02_726Z-debug.log

Npm log file

0 info it worked if it ends with ok
1 verbose cli [ '/root/.nvm/versions/node/v8.11.1/bin/node',
1 verbose cli   '/root/.nvm/versions/node/v8.11.1/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using npm@6.12.0
3 info using node@v8.11.1
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: /root/.nvm/versions/node/v8.11.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/test_4.8.11/laravel/node_modules/.bin:/root/.nvm/versions/node/v8.11.1/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/.composer/vendor/bin
9 verbose lifecycle @~dev: CWD: /var/www/test_4.8.11/laravel
10 silly lifecycle @~dev: Args: [ '-c', 'npm run development' ]
11 silly lifecycle @~dev: Returned: code: 1  signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: `npm run development`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/root/.nvm/versions/node/v8.11.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/root/.nvm/versions/node/v8.11.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid @
15 verbose cwd /var/www/test_4.8.11/laravel
16 verbose Linux 4.13.13-1-pve
17 verbose argv "/root/.nvm/versions/node/v8.11.1/bin/node" "/root/.nvm/versions/node/v8.11.1/bin/npm" "run" "dev"
18 verbose node v8.11.1
19 verbose npm  v6.12.0
20 error code ELIFECYCLE
21 error errno 1
22 error @ dev: `npm run development`
22 error Exit status 1
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Bartłomiej Malanowski staff commented 5 years ago

How can we reproduce your issue?


Julien Moulin free commented 5 years ago

I edit my ticket with steps to reproduce.


Bartłomiej Malanowski staff commented 5 years ago

what your logs says?


Julien Moulin free commented 5 years ago

I added console logs and npm debug log file.I try :- to upgrade npm from 5.6.0 to 6.12.0, no effect.It seems to be a problem when webpack tries to minify the code.


Julien Moulin free commented 5 years ago

I solved the problem with specify mdb.js file full path in webpack.mix.js and bootstrap.js

webpack.mix.js

const mix = require('laravel-mix'); 
// Extract common libs in vendor.js file
mix.extract(['lodash', 'popper.js', 'jquery', 'axios', 'bootstrap', 'mdbootstrap-pro/js/mdb.js'])
.autoload({'jquery': ['window.$', 'window.jQuery', '$']})
.js('resources/js/app.js', 'public/js/app.js')
.sass('resources/sass/app.scss', 'public/css');

resources/js/bootstrap.js

// require('mdboostrap-pro');
require('mdbootstrap-pro/js/mdb.js');

But, why compile works fine in 4.8.10 and webpack can't resolve without specify location of mdb.js in 4.8.11 ? I don't know ...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.11
  • Device: Laravel 6
  • Browser: ServerSide
  • OS: Debian
  • Provided sample code: Yes
  • Provided link: No