Plugin overwrites source maps generated by other plugins

[sebald]

I am using ts-loader and it generates the correct source maps. But when I add ExtractTextPlugin as a plugin somthing goes horribly wrong with the creation of the source maps.

Here is the relevant part of my setup:

module: {
    loaders: [

        // Support for Typescript
        { test: /\.ts$/, loader: 'ts' },

        // Support for Styles (CSS/Sass)
        {
            test:   /\.s(c|a)ss$/,
            loader: ExtractTextPlugin.extract(
                'style',
                `css?sourceMap!sass?sourceMap&includePaths[]=${bourbon.includePaths}`
            )
        }
    ]
},

plugins: [
    new ExtractTextPlugin('style.css', {
        allChunks: true
    })
]

With the ExtraTextPlugin enabled I get links to the TypeScript source like test.scss:7. Which is obviously not really the correct file ;-D If I disable the plugin (via disable: true) everything works fine (as long as I am using the source-map option).

I also removed the sourceMap param from the css and sass loader. But even then the source files are broken. With this setting they link to the compiled JS instead to the TypeScript files.

Did anyone encounter the same problem?

[sebald]

I check the generated code and there is actually no TypeScript source map anymore. But Chrome seems to find one!?

[plopinou]

I have the same problem using stylus for css and babel with es6.
When I have a js error, it shows that it's in app.styl:10
When looking at the map file, the whole chunk referencing the javascript is not there anymore.

Everything's fine if I disable the plugin.

[cwmoo740]

Same issue with babel-loader and ExtractTextPlugin. Enabling extract-text outputs this as the sourcemap:

{"version":3,"sources":[],"names":[],"mappings":"","file":"styles.css","sourceRoot":""}

[lanocturne]

+1

[elsigh]

+1

[eirikurn]

+1

[willemstuursma]

+1

[sokra]

Could you please create a small repro repo so I can test it?

[elsigh]

@paulshen and I just did this and discovered that it was our use of sourceMapFilename which was the culprit. Makes sense that the CSS source map overwrites the JS one when sourceMapFilename doesn't include [file] or something to generate a dynamic output name.

[duncangrist]

@elsigh - confirmed that was my issue too. Thanks for posting that 👍

[jamesthurley]

Thanks @elsigh, this fixed it for me as well.. I changed sourceMapFilename: '[name].[chunkhash].map' to sourceMapFilename: '[file].map' and it sorted the problem out.

[aaronwng]

+1

[chaoyangnz]

+1 Thanks @elsigh so smart!

[colthreepv]

This one is so hard to track down on a big webpack config.
I just made an empty repo to isolate the plugin and I was ready to create an issue :/

It should be big over the README.md

[tconroy]

Thank you so much @jamesthurley && @elsigh ! this was indeed the issue and the shared fix worked perfectly for me. Cheers! 🍻

[scamden]

omg thank you!!!!!!

[amitava82]

wasted few hours on this. Thanks @elsigh

[chrisvasz]

More kudos to @elsigh -- that was our issue too!

[seunlanlege]

I still have this issue and none of the above solutions work for me

[seunlanlege]

ok so i fixed it by adding:

...
output: {
    sourceMapFilename: '[file].map'
}
...

now it outputs bundle.js.map and index.css.map

[dvakatsiienko]

The same behavior with empty css source map:

{"version":3,"sources":[],"names":[],"mappings":"","file":"styles.css","sourceRoot":""}

Happens because of purifycss-webpack plugin, spent about 30 mins demystifying. Hope it helps someone.

[liamse]

Thanks @dvakatsiienko, I have the same problem and after omitting purifycss-webpack (move to production), problem solved.

[ghost]

The same behavior with empty css source map:

{"version":3,"sources":[],"names":[],"mappings":"","file":"styles-less.css","sourceRoot":"webpack:///"}

/# sourceMappingURL=styles-less.css.map/

Happens because of angular-router-loader plugin.

[alexander-akait]

DEPRECATED
Please use: https://github.com/webpack-contrib/mini-css-extract-plugin