Laravel-mix: mix.sourceMaps() does not work

[ryanmortier]

• Laravel Mix Version: 2.1.14
• Node Version (node -v): 10.12.0
• NPM Version (npm -v): 6.4.1
• OS: macOS

Description:

Following the documentation here: https://laravel.com/docs/5.7/mix#css-source-maps

mix.sourceMaps() doesn't work. It's not adding source maps.

Steps To Reproduce:

Add mix.sourceMaps() to your webpack.mix.js file and then npm run dev.

Here is my webpack.mix.js file:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | 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.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

[SimplyThomas]

I ran into a similar problem earlier. #879 fix worked for me when I added the following to my options:

mix.options({
    processCssUrls: false,
})
   .sourceMaps()
   .js(...)
   .sass(...);

For me there was an upstream issue with the resolve-url-loader dependency, but it recently got a re-write to postCSS and should resolve the issue. I don't have the time right now to work on a PR for this right now, however.

https://github.com/bholloway/resolve-url-loader/releases/tag/v3.0.0

[ryanmortier]

Thanks, this workaround worked for me:

if ( ! mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'inline-source-map'
    })
}

I'm going to leave this issue open though as I believe the original option isn't working.

[marzvrover]

Another workaround: .sourceMaps(true, 'source-map'). That first parameter is a boolean value for if you would source maps when ran as production as well.

The second parameter is the type of of source map. The interesting thing is that if you use the default value of eval-source-map everything seems to work fine. I'm not sure why it would work fine when you pass it in but not when you let it default to the value.

https://github.com/JeffreyWay/laravel-mix/blob/52582c120f2eaef0146d63a43c41235f40e3f030/src/Api.js#L12

[bonovski]

Well, I got the sass sourcemap to generate, the problem is now that the references point to the wrong files when viewed in the browser inspector.

[ZacharieBaptiste]

Omg, has this seriously been open since 18th of October? Isn't this kinda like an official package with laravel? Thx @MDooley47 at least that moves me forward for now.

[SimonEast]

Yes, can also confirm that this appears to be buggy. How are devs working effectively without this? The code mentioned above seems to be a temporary workaround:

.sourceMaps(true, 'source-map')

Note that this appears to output both JS and CSS sourcemaps in development mode, but only JS sourcemaps in production mode. I haven't confirmed yet if the sourcemaps are actually accurate.

[75th]

@SimonEast's fix doesn't work for me. I cannot get any CSS sourcemaps to be generated, either inline or separate, either in development or production.

[paxcodes]

@75th Have you tried putting both?

mix.webpackConfig({
        devtool: 'inline-source-map'
    })

AND mix.sourceMaps()

I used to only have the webpackConfig() method and it was working fine. I haven't been debugging in Chrome lately (2+ weeks) but when I did today, I noticed that source maps weren't working anymore. Adding in mix.sourceMaps() worked.

It's a quick, and dirty fix but I just needed to get the source maps up and running.

[marcamos]

I, too, have them both (on Mix 2.1.14) and it's working well:

...
.sourceMaps()
.webpackConfig({devtool: 'source-map'})
...

[bonovski]

The sourcemaps might generate, but they point to totally wrong files.

For example:
I have a main style.sassfile that imports a partial _base.sass.

@import 'base'

In _base.sass I have a simple sass rule:

   background: green

When I open the inspector in ChromeDevTools the rule is attributed to style.sass instead of _base.sass.

This is a fundamental thing that works flawlessly in gulp.

[Snapperfish]

Another workaround: .sourceMaps(true, 'source-map'). That first parameter is a boolean value for if you would source maps when ran as production as well.

The second parameter is the type of of source map. The interesting thing is that if you use the default value of eval-source-map everything seems to work fine. I'm not sure why it would work fine when you pass it in but not when you let it default to the value.

https://github.com/JeffreyWay/laravel-mix/blob/52582c120f2eaef0146d63a43c41235f40e3f030/src/Api.js#L12

I found that .sourceMaps(false, 'source-map') forced source maps in development mode.

[k8n]

I was experiencing same with mix 4.0. I rearranged my webpack.mix.js so that mix.sourceMaps() is called before anything else. Problem resolved; no workarounds needed.

[arxeiss]

Can confirm here.
mix version: 4.0.15
Node Version (node -v): 10.13.0
NPM Version (npm -v): 6.4.1
OS: Windows

With default webpack.mix.js file just added mix.sourceMaps(); and no CSS maps is created

---

Update:
I found, that during npm run dev Sass maps are created, but saved inside final scripts.js file. Not within separate .map file

[filipve1994]

I have also a lot of problems with sourceMaps, but by doing this:

mix.webpackConfig({ devtool: 'source-map' })

It seems to be working now.

Thanks to the information here:

https://stackoverflow.com/a/37653167
https://webpack.js.org/configuration/devtool/

[kbav]

I was experiencing same with mix 4.0. I rearranged my webpack.mix.js so that mix.sourceMaps() is called before anything else. Problem resolved; no workarounds needed.

This worked for me, but only when combined with...

I have also a lot of problems with sourceMaps, but by doing this:

mix.webpackConfig({ devtool: 'source-map' })

It seems to be working now.

Thank you @arxeiss and @filipve1994 .

I'm on node v8.11.2, npm 6.1.0, Laravel Mix 4.1.2, using outside of Laravel by way of the instructions in the docs, and using mix.less().

[Dannymx]

I am facing the same problem as @bonovski, the source map is generated, but it's pointing to the wrong file or line.

[mcelligottnick]

I had to use a combination of things here and other threads, this might help some people;

My file, with production stuff removed (note that this is from Laravue and running npm run hot not dev;

  .options({
    processCssUrls: false,
  })
  .sourceMaps()
  .js('resources/js/app.js', 'public/js')
  .extract([
    'vue',
    'axios',
    'vuex',
    'vue-router',
    'vue-i18n',
    'element-ui',
    'echarts',
  ])
  .options({
    processCssUrls: false,
  })
  .sass('resources/js/styles/index.scss', 'public/css/app.css', {
    implementation: require('node-sass'),
    outputStyle: 'compressed',
    sourceMap: true,
  })
  .eslint()
  .webpackConfig({
    devtool: 'inline-source-map',
  });

[enkia]

@bonovski did you find a solution to your issue? I'm having the same problem myself and have tried all the solutions suggested here.

[kilinkis]

tried all workarounds posted here, the only thing that worked is to inline the map, if not, the map will generate but won't work, all the rules point to style.css as @bonovski mentioned above.

here's my webpack.mix.js

.sourceMaps()
.options({
    processCssUrls: false
})
.webpackConfig({devtool: 'inline-source-map'})
.sass('./style.scss', './assets/styles/style.min.css', {implementation: require('node-sass')})
.tailwind('./tailwind.config.js')

[enkia]

Any solutions to @bonovski 's sass source map problem yet?

[bentaber]

Pull request #2282 resolves the prod source map issue for sass files.

Details:

Sass sourcemaps fail to generate in production builds due to cssnano combined with OptimizeCSSAssetsPlugin. Moving cssnano into postcss-loader resolves issue. More detail https://www.webfoobar.com/node/109

Note eval-source-maps still will not work at all for CSS, so implementers must use Mix.sourceMaps(true, 'source-map') to allow development builds to successfully generate sourcemaps. Production builds default to the source-map type.

[JackWH]

@bentaber Thank you! I was wrestling with this problem for hours, and after manually patching Mix with the code from your PR, it's working perfectly. Let's hope it's merged in soon.

[sergiz]

Anyone got any of the eval* sourcemap options working?

[pepeglucosa]

I, too, have them both (on Mix 2.1.14) and it's working well:

...
.sourceMaps()
.webpackConfig({devtool: 'source-map'})
...

It Worked for me aswell! tnks!

[sergiz]

Yeah, the problem is that the "eval-source-map" (or any other eval* option for that matter) doesn't work and since it's set as default for sourceMaps() in development, it seems like sourceMaps() doesn't work.

More elegant solution is for example
.sourceMaps(true, 'inline-source-map')
The third parameter defaults to source-map anyway (for production), so we can leave it empty.

[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.

[EugenGedroyc]

source map created

.sourceMaps()
.webpackConfig({devtool: 'source-map'})

How can remove the "webpack:///" prefix for files.less path in Styles ?
This solution output error

 mix.webpackConfig({ 
output: {
    devtoolModuleFilenameTemplate: '[resource-path]' 
  }
})

[mafudelaptu]

source map created

.sourceMaps()
.webpackConfig({devtool: 'source-map'})

How can remove the "webpack:///" prefix for files.less path in Styles ?
This solution output error

 mix.webpackConfig({ 
output: {
    devtoolModuleFilenameTemplate: '[resource-path]' 
  }
})

sadly not working for me :(

my setup:
```{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"build": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js && grunt update-theme && grunt git-push",
"test": "grunt dusk-test"
},
"dependencies": {
"bootstrap": "^4.5.0",
"compress": "^0.99.0",
"cross-env": "^5.2.1",
"current-device": "^0.8.2",
"dev-ip": "^1.0.1",
"dotenv": "^6.2.0",
"dotenv-expand": "^5.0.0",
"ekko-lightbox": "^5.3.0",
"flatpickr": "^4.6.3",
"isotope": "^1.0.0-alpha.3",
"isotope-layout": "^3.0.6",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.4",
"mobile-detect": "^1.4.4",
"npm": "^6.14.6",
"popper.js": "^1.16.1",
"sass-loader": "^7.3.1",
"slick-carousel": "^1.8.1",
"vue-typer": "^1.2.0"
},
"browserslist": [
">0.25%",
"not ie 11",
"not op_mini all"
],
"devDependencies": {
"animate.css": "^3.7.2",
"archiver": "^3.1.1",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"ekko-lightbox": "^5.3.0",
"fs": "0.0.1-security",
"fs-finder": "^1.8.1",
"grunt": "^1.2.1",
"grunt-contrib-clean": "^2.0.0",
"grunt-contrib-compress": "^1.6.0",
"grunt-ftp-push": "^1.2.1",
"grunt-git": "^1.0.14",
"grunt-json-generator": "^0.1.0",
"grunt-phpunit": "^0.3.6",
"grunt-string-replace": "^1.3.1",
"load-grunt-config": "^1.0.2",
"load-grunt-tasks": "^4.0.0",
"read-file": "^0.2.0",
"resolve-url-loader": "^2.3.2",
"sass": "^1.26.10",
"vue-template-compiler": "^2.6.11",
"webpack-cli": "^3.3.12"
}
}

webpack.mix.js:

const mix = require("laravel-mix");

var myEnv = require("dotenv").config();
var dotenvExpand = require("dotenv-expand");
dotenvExpand(myEnv);

const theme = process.env.WP_THEME;
mix.setResourceRoot("../");
mix.setPublicPath(public/themes/${theme}/assets);

mix.sourceMaps()
mix.webpackConfig({devtool: 'source-map'})
mix.webpackConfig({
output: {
devtoolModuleFilenameTemplate: '[resource-path]'
}
})
mix.js("resources/assets/scripts/app.js", "scripts");
mix.sass("resources/assets/styles/app.sass", "styles");
mix.js('resources/assets/backend/scripts/admin.js', 'backend/scripts');
mix.sass('resources/assets/backend/styles/admin.sass', 'backend/styles');

mix.options({
module: {
loaders: [
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
],
},
});

if (mix.inProduction()) {
mix.options({
terser: {
terserOptions: {
compress: {
drop_console: true,
},
},
},
});
}
else{
mix.browserSync({
proxy: process.env.WP_HOME
});
}
```

Screenshot of browser console:
https://tinyurl.com/ya7alr9c

[EugenGedroyc]

correct code:
mix .webpackConfig({ output: { devtoolModuleFilenameTemplate: '[resource-path]' }, }) .sourceMaps(false, 'inline-source-map');

but i don't change path, for example
devtoolModuleFilenameTemplate: 'file:///D:/[namespace]'
output: webpack:///./resources/less/style.less?13c8