Chrome not reading source map generated by elixir browserify
<p>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:</p>

<pre><code>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',
        ]);
});
</code></pre>

<p>Here is custom-charts.js:</p>

<pre><code>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 }
});
</code></pre>

<p>It does produce a custom-charts.js.map file, and the compiled scripts does say this at the end: <code>//# sourceMappingURL=custom-charts.js.map</code>. Chrome is just not reading it. </p>