devtool:'source-map' cause emitting map file for less in very wrong place

[jardakotesovec]

Here is example project https://dl.dropboxusercontent.com/u/12126978/webpack-test.zip

To reproduce problem:

• npm install
• webpack
• create syntax error in less/DRDashboard.less, like adding { parenthesis on wrong place, webpack will output error statement
• correct this syntax error in DRDashboard.less
• webpack generates map file that was not created before.. and also path is completely wrong:

Child extract-text-webpack-plugin:
                                                                                                                                                                                                                                                                                       Asset   Size  Chunks       Chunk Names
    /Users/athli/Devel/jesse/Dashboard/node_modules/extract-text-webpack-plugin /Users/athli/Devel/jesse/Dashboard/node_modules/css-loader/index.js!/Users/athli/Devel/jesse/Dashboard/node_modules/less-loader/index.js!/Users/athli/Devel/jesse/Dashboard/client/less/DRDashboard.less.map  77965               

I noticed that this issue happen only if devtool: 'source-map'. I would love to have map files also for less, but this option should apply only for js file, right? I guess that creating source map files for less is outstanding: webpack-contrib/less-loader#16 . So really not sure what happens here :-). Let me know if you can reproduce it.

Here is webpack config:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
            entry: "./app.js",
            output: {
                path: "build",
                filename: "app.js"
            },

            stats: {
                // Configure the console output
                colors: true,
                modules: false,
                reasons: false
            },
            // stats: false disables the stats output

            cache: true,
            debug: true,
            devtool: 'source-map',

            //storeStatsTo: "xyz", // writes the status to a variable named xyz
            // you may use it later in grunt i.e. <%= xyz.hash %>

            progress: false, // Don't show progress
            // Defaults to true

            failOnError: false, // don't report error to grunt if webpack find errors
            // Use this if webpack errors are tolerable and grunt should continue

            watch: true, // use webpacks watcher
            // You need to keep the grunt process alive

            keepalive: true, // don't finish the grunt task
            // Use this in combination with the watch option

            module: {
                loaders: [
                    {
                        test: /\.less$/,
                        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
                    },
                    {
                        test: /\.png$/,
                        loader: "url-loader?name=img/[name].[ext]&limit=8192"
                    },{
                        test: /\.(svg|ttf|eot|woff)$/,
                        loader: "file-loader?name=fonts/[name].[ext]"
                    }
                ]
            },
            plugins: [
                new ExtractTextPlugin("[name].css")
            ]
}

[sokra]

I tried it with you testcase but it works fine:

Hash: feccf5455ff9dacf0bc2
Version: webpack 1.4.3
Time: 1108ms
       Asset    Size  Chunks             Chunk Names
      app.js    1669       0  [emitted]  main
    main.css  194280       0  [emitted]  main
  app.js.map    1826       0  [emitted]  main
main.css.map      85       0  [emitted]  main
   [0] ./app.js 36 {0} [built]
   [1] ./less/DRDashboard.less 41 {0} [built]
   [2] ./~/css-loader!./~/less-loader!./less/DRDashboard.less 37494 [built]
   [3] ./~/style-loader/addStyles.js 3183 [built]
   [4] ./~/css-loader/cssToString.js 352 [built]
   [5] ./img/buttons_chat.sprite.png 7381 [built]
   [6] ./img/icons_toggle_group.sprite.png 5365 [built]
   [7] ./img/icon_groupMessaging.png 1461 [built]
   [8] ./img/icons_open_chat_item.sprite.png 1909 [built]
   [9] ./img/icon_attachment.png 2149 [built]
  [10] ./img/button-dashboard.sprite.png 5313 [built]
  [11] ./img/legend-icon.sprite.png 1609 [built]
  [12] ./img/dot-margin-icon.png 1313 [built]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader!./~/less-loader!./less/DRDashboard.less 37494 {0} [built]
       [1] ./~/css-loader/cssToString.js 352 {0} [built]
       [2] ./img/buttons_chat.sprite.png 7381 {0} [built]
       [3] ./img/icons_toggle_group.sprite.png 5365 {0} [built]
       [4] ./img/icon_groupMessaging.png 1461 {0} [built]
       [5] ./img/icons_open_chat_item.sprite.png 1909 {0} [built]
       [6] ./img/icon_attachment.png 2149 {0} [built]
       [7] ./img/button-dashboard.sprite.png 5313 {0} [built]
       [8] ./img/legend-icon.sprite.png 1609 {0} [built]
       [9] ./img/dot-margin-icon.png 1313 {0} [built]

Are all your dependencies up to date?

[jardakotesovec]

I think so, I am using exact same copy of test case as you do (including rm -Rf node-modules; npm install step). And having latest node (0.10.32). Maybe some platform difference? I have OS X 10.9.4, what about you?

Here is complete output, for every step. It might clarify something.

Step1 - initial

Jardas-MacBook-Pro:test athli$ webpack 
Hash: 7fa0ad55780483d39354
Version: webpack 1.4.3
Time: 1010ms
       Asset    Size  Chunks             Chunk Names
      app.js    1669       0  [emitted]  main
    main.css  194280       0  [emitted]  main
  app.js.map    1826       0  [emitted]  main
main.css.map      85       0  [emitted]  main
   [0] ./app.js 36 {0} [built]
    + 12 hidden modules
Child extract-text-webpack-plugin:
        + 10 hidden modules

step2 - syntax mistake created in less file

Hash: cfe49749efc671a23ec7
Version: webpack 1.4.3
Time: 37ms
     Asset  Size  Chunks             Chunk Names
    app.js  6222       0  [emitted]  main
app.js.map  7611       0  [emitted]  main
    + 4 hidden modules

ERROR in ./~/css-loader!./~/less-loader!./less/DRDashboard.less
Module build failed: missing opening `{`
 @ /Users/athli/tmp/test/less/DRDashboard.less (line 129, column 0)
 near lines:
    }
   }

 @ ./less/DRDashboard.less 4:14-181
ERROR in ./less/DRDashboard.less
Module build failed: Error: Didn't get a result from child compiler
    at Object.<anonymous> (/Users/athli/tmp/test/node_modules/extract-text-webpack-plugin/loader.js:83:22)
    at Tapable.<anonymous> (/Users/athli/tmp/test/node_modules/webpack/lib/Compiler.js:210:10)
    at /Users/athli/tmp/test/node_modules/webpack/lib/Compiler.js:397:12
    at Tapable.next (/Users/athli/tmp/test/node_modules/webpack/node_modules/tapable/lib/Tapable.js:69:11)
    at Object.<anonymous> (/Users/athli/tmp/test/node_modules/extract-text-webpack-plugin/loader.js:76:5)
    at Tapable.next (/Users/athli/tmp/test/node_modules/webpack/node_modules/tapable/lib/Tapable.js:71:37)
    at CachePlugin.<anonymous> (/Users/athli/tmp/test/node_modules/webpack/lib/CachePlugin.js:40:4)
    at Tapable.applyPluginsAsync (/Users/athli/tmp/test/node_modules/webpack/node_modules/tapable/lib/Tapable.js:73:13)
    at Tapable.<anonymous> (/Users/athli/tmp/test/node_modules/webpack/lib/Compiler.js:394:9)
    at Tapable.<anonymous> (/Users/athli/tmp/test/node_modules/webpack/lib/Compilation.js:529:13)
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./~/css-loader!./~/less-loader!./less/DRDashboard.less
    Module build failed: missing opening `{`
     @ /Users/athli/tmp/test/less/DRDashboard.less (line 129, column 0)
     near lines:
        }
       }

step 3 - syntax corrected

Hash: 7fa0ad55780483d39354
Version: webpack 1.4.3
Time: 341ms
                                                                                                                                                                                                                        Asset    Size  Chunks             Chunk Names
/Users/athli/tmp/test/node_modules/extract-text-webpack-plugin /Users/athli/tmp/test/node_modules/css-loader/index.js!/Users/athli/tmp/test/node_modules/less-loader/index.js!/Users/athli/tmp/test/less/DRDashboard.less.map   77767          [emitted]  
                                                                                                                                                                                                                       app.js    1669       0  [emitted]  main
                                                                                                                                                                                                                     main.css  194280       0  [emitted]  main
                                                                                                                                                                                                                   app.js.map    1826       0  [emitted]  main
                                                                                                                                                                                                                 main.css.map      85       0  [emitted]  main
    + 13 hidden modules
Child extract-text-webpack-plugin:
                                                                                                                                                                                                                            Asset   Size  Chunks             Chunk Names
    /Users/athli/tmp/test/node_modules/extract-text-webpack-plugin /Users/athli/tmp/test/node_modules/css-loader/index.js!/Users/athli/tmp/test/node_modules/less-loader/index.js!/Users/athli/tmp/test/less/DRDashboard.less.map  77767          [emitted]  
        + 10 hidden modules

[sokra]

ah ok... i missed the syntax error step...

[sokra]

This was a tricky one... 😄

[jardakotesovec]

Thanks!