mix.sourceMaps() does not work #1793

ryanmortier · 2018-10-18T15:39:45Z

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

The text was updated successfully, but these errors were encountered:

SimplyThomas · 2018-10-19T13:37:34Z

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 · 2018-10-19T19:04:35Z

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 · 2018-10-25T20:42:41Z

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 · 2018-11-06T18:34:50Z

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 · 2018-12-27T21:02:19Z

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 · 2019-01-16T21:27:02Z

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.

laravel-mix/laravel-mix#1793

75th · 2019-02-05T22:54:11Z

@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 · 2019-02-13T22:00:11Z

@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 · 2019-02-14T19:11:32Z

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

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

bonovski · 2019-03-05T12:32:25Z

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

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

@import 'base'

In _base.sass I have a simple sass rule:

body
   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 · 2019-05-03T03:50:59Z

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 · 2019-05-13T17:20:05Z

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 · 2019-05-19T20:23:49Z

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 · 2019-07-04T09:14:53Z

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 · 2019-07-17T14:40:05Z

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 · 2019-07-25T21:06:37Z

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

mcelligottnick · 2019-08-01T13:06:25Z

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;


mix
  .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 · 2019-08-30T20:59:42Z

@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 · 2019-09-10T14:54:44Z

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

mix
.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 · 2019-10-24T16:08:46Z

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

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.

bentaber · 2019-11-20T16:26:01Z

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 · 2019-12-11T20:03:08Z

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

sergejostir · 2020-01-01T19:18:08Z

Anyone got any of the eval* sourcemap options working?

pepeglucosa · 2020-01-03T21:55:27Z

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!

sergejostir · 2020-01-03T22:27:39Z

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 · 2020-03-03T23:18:53Z

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.

* Fix prod css/sass sourcemaps (#1793) 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. * Add cssnano to postcss plugins * Allow cssNano config options to be specified * remove comment

EugenGedroyc · 2020-07-09T08:19:23Z

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 · 2020-07-09T08:53:57Z

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 · 2020-07-09T11:00:36Z

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

See: laravel-mix/laravel-mix#1793

…workaround > People had similar problems with laravel-mix and sourcemaps() in here laravel-mix/laravel-mix#1793

adriandmitroca added a commit to adriandmitroca/wordpress-theme-starter that referenced this issue Jan 28, 2019

fixed sourcemaps

3caf53e

laravel-mix/laravel-mix#1793

incon mentioned this issue Apr 9, 2019

Add inline source maps to JavaScript files inertiajs/pingcrm#11

Merged

mvdnbrk mentioned this issue Jun 16, 2019

No mention of sourceMaps() method mvdnbrk/laravel-mix-docs#34

Closed

danieldevsquad mentioned this issue Aug 15, 2019

[5.8] Updating source mapping documentation laravel/docs#5369

Merged

bentaber mentioned this issue Nov 20, 2019

Fix prod css/sass sourcemaps (#1793) #2282

Merged

helloiamlukas added a commit to helloiamlukas/jigsaw-forestry-template that referenced this issue Jan 17, 2020

fix source maps, see laravel-mix/laravel-mix#1793

dd8ba24

stale bot added the stale label Mar 3, 2020

stale bot closed this as completed Mar 6, 2020

tiagofrancafernandes mentioned this issue Jul 26, 2020

Source Maps not generating in dev #932

Closed

dependabot bot mentioned this issue Mar 17, 2021

Bump laravel-mix from 0.11.4 to 5.0.9 Zemhart/project_UAS_PHP#25

Merged

jxjj added a commit to UMN-LATIS/ChimeIn2.0 that referenced this issue Oct 26, 2021

Fix sourcemaps not properly loading

d44fc19

See: laravel-mix/laravel-mix#1793

jasperf mentioned this issue Nov 27, 2021

Integration into Laravel Vue Application with Laravel Mix bugsnag/webpack-bugsnag-plugins#69

Closed

janis-rullis added a commit to Janis-Rullis-IT/dev that referenced this issue Jul 27, 2022

with-laravel-mix.md: Mention laravel-mix/laravel-mix#1793 in my gulp …

7bdcc63

…workaround > People had similar problems with laravel-mix and sourcemaps() in here laravel-mix/laravel-mix#1793

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mix.sourceMaps() does not work #1793

mix.sourceMaps() does not work #1793

ryanmortier commented Oct 18, 2018 •

edited

Loading

SimplyThomas commented Oct 19, 2018

ryanmortier commented Oct 19, 2018

marzvrover commented Oct 25, 2018 •

edited

Loading

bonovski commented Nov 6, 2018

ZacharieBaptiste commented Dec 27, 2018 •

edited

Loading

SimonEast commented Jan 16, 2019

75th commented Feb 5, 2019

paxcodes commented Feb 13, 2019

marcamos commented Feb 14, 2019

bonovski commented Mar 5, 2019

Snapperfish commented May 3, 2019

k8n commented May 13, 2019

arxeiss commented May 19, 2019 •

edited

Loading

filipve1994 commented Jul 4, 2019

kbav commented Jul 17, 2019

Dannymx commented Jul 25, 2019

mcelligottnick commented Aug 1, 2019 •

edited

Loading

enkia commented Aug 30, 2019

kilinkis commented Sep 10, 2019

enkia commented Oct 24, 2019

bentaber commented Nov 20, 2019 •

edited

Loading

JackWH commented Dec 11, 2019

sergejostir commented Jan 1, 2020

pepeglucosa commented Jan 3, 2020

sergejostir commented Jan 3, 2020 •

edited

Loading

stale bot commented Mar 3, 2020

EugenGedroyc commented Jul 9, 2020 •

edited

Loading

mafudelaptu commented Jul 9, 2020 •

edited

Loading

EugenGedroyc commented Jul 9, 2020

mix.sourceMaps() does not work #1793

mix.sourceMaps() does not work #1793

Comments

ryanmortier commented Oct 18, 2018 • edited Loading

Description:

Steps To Reproduce:

SimplyThomas commented Oct 19, 2018

ryanmortier commented Oct 19, 2018

marzvrover commented Oct 25, 2018 • edited Loading

bonovski commented Nov 6, 2018

ZacharieBaptiste commented Dec 27, 2018 • edited Loading

SimonEast commented Jan 16, 2019

75th commented Feb 5, 2019

paxcodes commented Feb 13, 2019

marcamos commented Feb 14, 2019

bonovski commented Mar 5, 2019

Snapperfish commented May 3, 2019

k8n commented May 13, 2019

arxeiss commented May 19, 2019 • edited Loading

filipve1994 commented Jul 4, 2019

kbav commented Jul 17, 2019

Dannymx commented Jul 25, 2019

mcelligottnick commented Aug 1, 2019 • edited Loading

enkia commented Aug 30, 2019

kilinkis commented Sep 10, 2019

enkia commented Oct 24, 2019

bentaber commented Nov 20, 2019 • edited Loading

JackWH commented Dec 11, 2019

sergejostir commented Jan 1, 2020

pepeglucosa commented Jan 3, 2020

sergejostir commented Jan 3, 2020 • edited Loading

stale bot commented Mar 3, 2020

EugenGedroyc commented Jul 9, 2020 • edited Loading

mafudelaptu commented Jul 9, 2020 • edited Loading

EugenGedroyc commented Jul 9, 2020

ryanmortier commented Oct 18, 2018 •

edited

Loading

marzvrover commented Oct 25, 2018 •

edited

Loading

ZacharieBaptiste commented Dec 27, 2018 •

edited

Loading

arxeiss commented May 19, 2019 •

edited

Loading

mcelligottnick commented Aug 1, 2019 •

edited

Loading

bentaber commented Nov 20, 2019 •

edited

Loading

sergejostir commented Jan 3, 2020 •

edited

Loading

EugenGedroyc commented Jul 9, 2020 •

edited

Loading

mafudelaptu commented Jul 9, 2020 •

edited

Loading