Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Slava.Basenko's avatar

Laravel-Mix sourcemap files not genarates

Hi every one! This is my config file

const { mix } = require('laravel-mix');
const webpack = require('webpack');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
    plugins: [
        new webpack.IgnorePlugin(/pusher-js/),
        // Make sure that the plugin is after any plugins that add images
        new ImageminPlugin({
            test: 'img/**',
            disable: process.env.NODE_ENV !== 'production', // Disable during development
        })
    ]
});

const JS_VENDOR_DIR = 'public/js/vendor';
const CSS_VENDOR_DIR = 'public/css/vendor';

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        'vue',
        'axios',
        'lodash',
        'vee-validate',
        'laravel-echo',
        'noty',
        'vue-mugen-scroll',
        'bootstrap',
        'cropperjs'
    ])
   .sass('resources/assets/sass/app.scss', 'public/css')
    .copy(
        'node_modules/jquery/dist/jquery.min.js',
        JS_VENDOR_DIR
    )
    .copy(
        'resources/assets/js/vendor/canvas-to-blob.min.js',
        JS_VENDOR_DIR
    )
    .copy(
        'node_modules/cropperjs/dist/cropper.min.css',
        CSS_VENDOR_DIR
    )
    .copy(
        'resources/assets/js/vendor/svg-sprites-cache.js',
        JS_VENDOR_DIR
    )
    .copy(
        'resources/assets/js/vendor/spin.min.js',
        JS_VENDOR_DIR
    )
    .copy(
        'resources/assets/js/pages/maintenance.js',
        'public/js'
    )
    .copy(
        'node_modules/webticker/jquery.webticker.min.js',
        'public/js'
    )
    .copy(
        'resources/assets/img',
        'public/img',
        false
    )
    .sourceMaps();

if (mix.config.inProduction) {
    mix.version();
}

What may be the reason?

0 likes
12 replies
PaulSkinner's avatar

I'm also having this issue with the below code:

mix.js('resources/assets/bootstrap/js/bootstrap.min.js', 'public/js/app.js')
    .sass('resources/assets/sass/application.scss', 'public/css/app.css')
    .sourceMaps()
    .version();
gira82's avatar

I have the same problem; any news?

jago86's avatar

Same problem here. Some one have any solution?

stefanX201's avatar

My mix process (version 0.10.0) doesnt create any source maps

mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .js('resources/assets/js/ami.js', 'public/js/ami.js')
    .extract(['vue', 'axios', 'bootstrap-sass', 'jquery', 'vue-select'])
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/ami.scss', 'public/css')
    .sourceMaps()

any idea?

darkhouse's avatar

I still had troubles with this, even with all the fixes. The key for me was devtool: 'source-map'. Here's my webpack config for anybody interested:

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sourceMaps()
    .webpackConfig({
        devtool: 'source-map'
    })
    .options({
        processCssUrls: false
    });
7 likes

Please or to participate in this conversation.