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.
