Skip to content

Upgrade Laravel Mix 0.8.1 to 2.1.14

• By Jasper Frumau Laravel

Wanted to upgrade Laravel Mix 0.8.1 to 2.1.14 today. Thought it would not be that hard to do as 2.1.14 has not had major changes compared to laravel-mix 3 or 4 with Babel and Webpack upgrades. Thought, how hard could it be. Well a lot harder than I expected it to be that is for sure.

First Trial

Well, it was a lot more painful than I wanted it to be. Spent the morning upgrading and downgrading due to jQuery not being loaded properly anymore. That and issues with the Vue Template compiler. jQuery UI and Bootstrap Sass complained jQuery was not being included

app.js?id=76b84b57bbd969a37ebf:7577 Uncaught Error: Bootstrap's JavaScript requires jQuery

and elsewhere I had NPM balking about issues like

WARNING in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-0dc07b84","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/editor/bar/Aside.vue
(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
@ ./resources/assets/js/components/editor/bar/Aside.vue 10:23-275

Trial II

So I decided to give it another go the afternoon. First thing I did was

npm remove laravel-mix
npm install laravel-mix@^2.1.0 --save-dev

I also moved jQuery require for the js file in question above Bootstrap Sass. Then I tried the change:

npm run dev

Saw several warnings

 22% building modules 101/158 modules 57 active ...nents/publish/modals/SomeModal.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

As well as these

WARNING in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-1dcf7f1a","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/preview/Preview.vue
(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
 @ ./resources/assets/js/components/preview/App.vue 10:23-269
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js
----
WARNING in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-1c708612","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/editor/modals/ImageUploaderAndSelectorModal.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to  to denote scoped slots.
 @ ./resources/assets/js/components/editor/modals/ImageUploaderAndSelectorModal.vue 10:23-297
 @ ./resources/assets/js/editor.js
 @ multi ./resources/assets/js/editor.js ./resources/assets/sass/editor.scss ./resources/assets/sass/login.scss ./resources/assets/sass/preview.scss ./resources/assets/sass/published.scss ./resources/assets/sass/dashboard.scss 

When I ran the application again initially I only saw old warning from Chrome and Vue Dev Tools. Not the jQuery errors. But so I did have these new warning on using scope in Vue as well as component lists rendering with explicit keys.

Clean Sweep

Then I did a clean sweep just to make sure I would not get these jQuery included or other errors again ruining the application’s functioning:

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

And then I compiled to see how things were going:

and I saw

npm WARN deprecated jquery-jcrop@0.9.13: No further updates to this package after v0.9.15. Please use original creator's npm package https://www.npmjs.com/package/jcrop for current/future versions 3.0+.
npm WARN deprecated vue-xeditable@1.1.2: not good enough
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> fsevents@1.2.9 install /Users/jasper/code/site.com/docker/laravel/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/jasper/code/site.com/docker/laravel/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" is installed via remote

> node-sass@4.12.0 install /Users/jasper/code/site.com/docker/laravel/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/jasper/.npm/node-sass/4.12.0/darwin-x64-57_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/jasper/code/site.com/docker/laravel/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.12.0 postinstall /Users/jasper/code/site.com/docker/laravel/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/jasper/code/site.com/docker/laravel/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN img-loader@3.0.1 requires a peer of imagemin@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN The package bootstrap-sass is included as both a dev and production dependency.
npm WARN The package vue is included as both a dev and production dependency.
npm WARN The package vue-template-compiler is included as both a dev and production dependency.

Then I compiled and did see the same warnings.

Vue Color Error

Now on backend of the app I saw these familiar errors again:

TypeError: Cannot read property 'map' of null
    at VueComponent.paletteUpperCase (editor.js?id=85ed7a9c0a7f4f7f5fbb:109185)
    at Proxy.r (editor.js?id=85ed7a9c0a7f4f7f5fbb:109185)
    at VueComponent.Vue._render (editor.js?id=85ed7a9c0a7f4f7f5fbb:127647)
    at VueComponent.updateComponent (editor.js?id=85ed7a9c0a7f4f7f5fbb:128163)
    at Watcher.get (editor.js?id=85ed7a9c0a7f4f7f5fbb:128574)
    at new Watcher (editor.js?id=85ed7a9c0a7f4f7f5fbb:128563)
    at mountComponent (editor.js?id=85ed7a9c0a7f4f7f5fbb:128170)
    at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (editor.js?id=85ed7a9c0a7f4f7f5fbb:133140)
    at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (editor.js?id=85ed7a9c0a7f4f7f5fbb:136025)
    at init (editor.js?id=85ed7a9c0a7f4f7f5fbb:127227) 

As I did not want to upgrade code to work with Vue Color 2.4.7 I pinned the Vue color in package.json . Actually bumped into this issue before and posted at Github here.

"vue-color": "2.4.6",

and did a new

npm install

and ran dev again. Afterwards I had no more Color Palette issue.

jQuery Errors?

The jQuery Errors I had before were still not occurring. So perhaps my app.js fix with moving jQuery before Bootstrap had helped. However, publication of app data did no longer work We got these errors

POST https://site.test/back/publish/55 500
dispatchXhrRequest @ back.js?id=cf8337ab1466593ac001:3310
xhrAdapter @ back.js?id=cf8337ab1466593ac001:3147
dispatchRequest @ back.js?id=cf8337ab1466593ac001:3715
Promise.then (async)
request @ back.js?id=cf8337ab1466593ac001:3542
wrap @ back.js?id=cf8337ab1466593ac001:3949
./resources/assets/js/bootstrap.js.window.axios.postJSON @ back.js?id=cf8337ab1466593ac001:136234
publish @ back.js?id=cf8337ab1466593ac001:6062
invokeWithErrorHandling @ back.js?id=cf8337ab1466593ac001:125965
invoker @ back.js?id=cf8337ab1466593ac001:126290
original._wrapper @ back.js?id=cf8337ab1466593ac001:131643
back.js?id=cf8337ab1466593ac001:6072 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
    at VueComponent.handleResponse (back.js?id=cf8337ab1466593ac001:6072) 

This seemed to be an issue with hitting a Xhr 200 instead of 201.

Stuck for now so moved it to a new branch:

576 git checkout -b mix2114
577 git status
578 git add -A && git commit -a -m "first laravel-mix 2.1.14 trial"
579 git push
580 git push --set-upstream origin mix2114
581 git checkout master
582 rm -rf node_modules/
583 npm install
584 npm run dev

Wrong Storage Path

In the end we figured out we needed to adjust the storage path which was off and causing an error 500. We had to remove the mix helper from the path and just use the public path alone. As soon as this was done all was fine. Simply an error we overlooked and could see in the console and Bugsnag later on with a Laravel Valet setup of things.

Comments are closed for this post.