vuetify.js.map: Source map error: SyntaxError - laravel

Question

Im trying to study Laravel with VueJS using Homestead. I decided to use Vuetify in my study instead of Bootstrap by installing it throughnpm.
Here is my app.js:
import "material-design-icons-iconfont/dist/material-design-icons.css";
import "vuetify/dist/vuetify.min.css";
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/App.vue";
import ExampleComponent from './components/ExampleComponent.vue';
import VueRouter from "vue-router";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(Vuetify, VueRouter, axios, VueAxios);
const routes = [
{ path: "/", name: "Dashboard", component: ExampleComponent }
];
const router = new VueRouter({ mode: "history", routes: routes, linkExactActiveClass: "active" });
new Vue(Vue.util.extend({ router }, App)).$mount("#app");
But in my console log I'm getting this error:
Source map error: SyntaxError: JSON.parse: unexpected character at
line 1 column 1 of the JSON data Resource URL: http://xcy.dv/js/app.js
Source Map URL: vuetify.js.map
What am I missing here? I'm new to VueJS

Answer 1

By the help of Vuetify community, I found out that I need to include .sourceMaps() in my webpack.mix.js like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').sourceMaps();
It basically enable the source maps since it's disabled by default.

Answer 2

I had to update webpack.mix.js with
mix.webpackConfig({
output: {
chunkFilename: mix.inProduction() ? "js/prod/chunks/[name]?id=[chunkhash].js" : "js/dev/chunks/[name].js"
},
devtool: 'source-map' // Notice this
}).sourceMaps(); // And this
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');