Firefox / Chrome - DevTools Failed To Parse SourceMap

[pihish]

I am able to generate source maps for my minified JS files. My call looks like:

compressor.minify({
	compressor: 'uglifyjs',
	input: ['./js/**/*.js'],
	output: './js/app.min.js',
	options: {
		sourceMap: {
			url: './js/app.min.js.map'
		}
	},
	callback: function(err, min){}
});

When I open my webpage in both Chrome and Firefox, I get a DevTools failed to parse SourceMap error. I have JS source maps enabled in Chrome and I validated the source map file as valid JSON. I also see the reference to the source map at the end of my minified JS file.

What could be causing this error?

[pihish]

Seems like this is related to #685 . The url parameter under options/sourceMap is appended to the minified file. Since that path is relative from the project's standpoint, the browser won't be able to find it when it reads the link.

[srod]

I will merge #685 and release an update.

[srod]

I've released 4.1.2, can you test it?

[pihish]

@srod I am using the NPM package which is still on 3.6 Is that a different package that the master branch on here?

[srod]

The master branch was updated to Lerna since version 4, which now is multi packages:

• core: https://www.npmjs.com/package/@node-minify/core
• uglify-es: https://www.npmjs.com/package/@node-minify/uglify-es

Documentation: https://node-minify.2clics.net/

So yes, v4 is a new package.

[pihish]

@srod What options should I use after updating? I've tested the following:

options: {
		sourceMap: {
			filename: 'vendor.min.js.map',
			url: './angular/js/vendor.min.js.map'
		}
	},

I am expecting vendor.min.js.map to serve as the reference to be at the bottom of the minified file, but I am still seeing ./angular/js/vendor.min.js.map. From what I see on UglifyJS' documentation, the filename property should be the reference string and the url property should be the relative path (from the config file).

[pihish]

@srod Any update on the above?

[srod]

Sorry for the late reply, I'm on vacation, I will check as soon as I can.

…

On Wed, Jul 17, 2019, 17:11 Peter Jin ***@***.***> wrote: @srod <https://github.com/srod> Any update on the above? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#715?email_source=notifications&email_token=AADPXSVYXXA4433TXSYFNFLP74ZCVA5CNFSM4ICLFKCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2ESUEQ#issuecomment-512305682>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADPXSXF7OVPADSGOZHZMRLP74ZCVANCNFSM4ICLFKCA> .

[pihish]

@srod When you have time, can you also explain how source maps work with Clean CSS?

Based on Clean CSS' readme, I am assuming you need to use the following call:

compressor({
	compressor: cleanCSS,
	input: ['./css/app/**/*.css'],
	output: './css/app.min.css',
	options: {
		sourceMap: true
	},
	callback: function(err, min){}
});

The above doesn't generate any source maps. Does node-minify currently support generating source maps with Clean CSS?

[pihish]

@srod Any update on this?

[srod]

@pihish Do you finally got it working ?

[pihish]

@srod No, did you have a chance to go over it?

[srod]

I've published 5.0.0, can you try it?