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 ]
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
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
resources/js/bootstrap.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 ...