Chrome not reading source map generated by elixir browserify - gulp

Question

I'm using Laravel elixir to compile my js and css files with gulp. I'm using Chrome to debug, and it's picking up the sourcemaps generated by mix.styles and mix.scripts but not the one generated by mix.browserify. I can't see what I'm doing wrong. I want it to tell me that I have an error on custom-charts.js at line 45 of the source file but instead it says it is on line 14785 of the compiled file.
Here is my gulpfile:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less('app.less', 'resources/assets/css')
.styles([
'libs/jquery-ui.min.css',
'libs/jquery-ui.structure.min.css',
'libs/jquery-ui.theme.min.css',
'libs/select2.min.css',
'app.css'
])
.browserify('custom-charts.js')
.scripts([
'libs/jquery.min.js',
'libs/bootstrap.min.js',
'libs/select2.min.js',
'libs/jquery-ui.min.js',
'libs/vue.js',
'plugin-options.js',
'custom-jquery.js',
'custom-vue.js',
]);
});
Here is custom-charts.js:
import Chart from 'chart.js';
var ctx = document.getElementById("graph").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
new Vue({
el: 'body',
components: { Graph }
});
It does produce a custom-charts.js.map file, and the compiled scripts does say this at the end: //# sourceMappingURL=custom-charts.js.map. Chrome is just not reading it.

Answer 1

Hope this might help a bit
The browserify function as mention in the documentation
elixir(function(mix) {
mix.browserify('index.js');
});
assumes that your scripts are stored in resources/assets/js, though you're free to override the default.
Alternatively you might want to use laravel-elixir-browserify here
npm install --save-dev laravel-elixir-browserify
and include in the gulpfile.js as
var browserify = require('laravel-elixir-browserify');