Chrome not reading source map generated by elixir browserify

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.

score 0 · Answer 1 · answered Oct 18 '16 at 22:12

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');

Chrome not reading source map generated by elixir browserify

1 Answers1