Laravel-mix: Source maps not working with Sentry in production

[carestad]

• Laravel Mix Version: 2.1.11
• Node Version: 8.11.1
• NPM Version: 5.6.0
• OS: Debian 9

Description:

Using Laravel-mix with devtool: 'source-map' (or mix.js(FILE).version().extract().sourceMaps(true) for that matter) generates .map files for all JS assets on both dev and prod, but the ones generated in prod does not validate (on sourcemaps.io) nor works with Sentry debugging when generated in production mode.

package.json:

{
  "browserslist": [
    "defaults",
    "iOS 7"
  ],
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production"
  },
  "dependencies": {
    "autolinker": "^1.6.2",
    "axios": "^0.16.2",
    "laravel-mix": "^2.1.11",
    "photoswipe": "^4.1.2",
    "raven-js": "^3.23.1",
    "vue": "^2.5.13",
    "vuex": "^2.4.0"
  },
  "devDependencies": {
    "@sentry/webpack-plugin": "^1.4.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-vue": "^1.5.1",
    "cross-env": "^5.1.4",
    "dotenv-webpack": "^1.5.5",
    "es6-promise": "^4.2.4",
    "eslint": "^4.19.1",
    "eslint-plugin-vue": "^4.4.0",
    "lodash": "^4.17.5",
    "purify-css": "^1.2.6",
    "purifycss-webpack": "^0.7.0",
    "signature_pad": "^2.3.0",
    "vue-affix": "^0.2.1",
    "vue-lazyload": "^1.2.2",
    "vue-moment": "^2.2.0",
    "vue-mugen-scroll": "^0.2.5",
    "vue-numeric": "^2.3.0",
    "vue-router": "^2.7.0",
    "vue-scrollto": "^2.11.0",
    "vue-spinner": "^1.0.3",
    "vue-styleguidist": "^1.5.0",
    "vue-template-compiler": "^2.5.13",
    "vuejs-datepicker": "^0.9.29"
  }
}

webpack.mix.js:

let mix = require('laravel-mix');
let webpack = require('webpack');

const path = require("path");
const glob = require("glob");
const SentryCliPlugin = require('@sentry/webpack-plugin');
const Dotenv = require('dotenv-webpack');
require('dotenv').load();

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
;

let config = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, "resources"), // your application source code root
                    path.resolve(__dirname, 'node_modules/bootstrap-vue'),
                    path.resolve(__dirname, 'node_modules/vue-photoswipe')
                ],
                loader: "babel-loader"
            },
        ],
    },
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nb|en-gb|pl|de|ru|lt|lv/), //Remove unnecessary moment language files
        new Dotenv(),
        new webpack.DefinePlugin({
            appRoot: JSON.stringify(path.resolve(__dirname)),
            webRoot: JSON.stringify(path.resolve(__dirname, 'public')),
        }),
    ],
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: 'source-map',
};

/**
 * Sentry
 */
if (process.env.SENTRY_DEBUG == 'true') {
    console.info("Sentry debugging on")
    config.plugins.push(
        new SentryCliPlugin({
            include: '.',
            ignore: '*',
        })
    )
}

mix.webpackConfig(config)

Steps To Reproduce:

1. Set mix.webpackConfig({ devtool: 'source-map' })
2. npm run dev
3. Verify js assets with sourcemaps.io
4. npm run prod
5. Try to verify source maps again after generating in production mode, should now fail

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[oscarmorrison]

Any extra thoughts on this @JeffreyWay having same issue

[obaid]

I am running into the same issue. Any idea how to resolve it? @JeffreyWay