<bug> SourceMap broke when migrating to webpack@2

[ImJoeHs]

Hello, I am trying to migrate my project to webpack@2. According to this, my config is like :

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  // must be 'source-map' or 'inline-source-map'
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract(
          fallbackLoader: 'style-loader',
          loaders: [
            // activate source maps via loader query
            {
              loader: 'css-loader',
              options: { sourceMap: true, importLoaders: 1 }
            },
            {
              loader: 'less-loader',
              options: { sourceMap: true }
            }
          ]
        )
      }
    ]
  },
  plugins: [
    // extract CSS into separate file
    new ExtractTextPlugin('app.bundle.css')
  ]
}

and I got

ERROR in ./~/css-loader?{"sourceMap":true}!./~/less-loader?{"sourceMap":true}!./src/app/components/site-header/style.module.less
    Module build failed: TypeError: Path must be a string. Received undefined
        at assertPath (path.js:7:11)
        at Object.relative (path.js:1226:5)
        at Object.<anonymous> (/home/joe/workspace/battlenet/admin_chimera/node_modules/css-loader/lib/loader.js:101:19)
        at Array.map (native)
        at Object.<anonymous> (/home/joe/workspace/battlenet/admin_chimera/node_modules/css-loader/lib/loader.js:99:31)
        at /home/joe/workspace/battlenet/admin_chimera/node_modules/css-loader/lib/processCss.js:201:3
        at process._tickCallback (internal/process/next_tick.js:103:7)

By remove then sourceMap option, everything works.

versions: "css-loader": "^0.26.2", "webpack": "^2.2.1", "less": "^2.7.2", "less-loader": "^2.2.3"

Did I make any mistake? Hope for helps, thanks!

[Jeremboo]

Hi,

I think I have the same problem with the sourceMap option when migrating to webpack@2 :

{
  test: /\.(styl|css)$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { sourceMap: true },
    },
    {
      loader: 'stylus-loader',
      options: {
        import: path.resolve(__dirname, '../app/style/base.styl'),
      },
    },
  ]
},

got :

ERROR in ./~/css-loader?{"sourceMap":true}!./~/stylus-loader?{"import":"[...]/app/style/base.styl"}!./app/style/fonts.styl
Module build failed: TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.relative (path.js:1226:5)
    at Object.<anonymous> ([...]/node_modules/css-loader/lib/loader.js:101:19)
    at Array.map (native)
    at Object.<anonymous> ([...]/node_modules/css-loader/lib/loader.js:99:31)
    at [...]/node_modules/css-loader/lib/processCss.js:201:3
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./app/style/fonts.styl 4:14-140 13:2-17:4 14:20-146
 @ ./app/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:3333 webpack/hot/dev-server babel-polyfill ./app/main.js

versions:

"css-loader": "^0.26.2", "style-loader": "^0.13.2", "stylus": "^0.54.5", "stylus-loader": "^2.5.0",

More Informations :

I do not have any errors when options: { sourceMap: true }, is commented.

[michael-ciniawsky]

@Jeremboo Can you try to set { sourceMap: true } in stylus-loader options aswell? Not 💯 that it exists 😛 but please try

[Jeremboo]

@michael-ciniawsky even if sourceMap in stylus-loader seems to be supported (but not documented), nothing is appended (no errors or sourceMap) :/

I think stylus-loader need css-loader?sourceMap to.

[michael-ciniawsky]

@Jeremboo kk. Can you add a small test case for repro please 🙏 ? Either as a gist or a repo to clone

[ekulabuhov]

@Jeremboo I've recreated your example as gist here: https://gist.github.com/ekulabuhov/1cfc08394de9619865d377db65b58d83

Seems to be working for me. Please make sure that all your dependencies versions match.

[Jeremboo]

@michael-ciniawsky @ekulabuhov thank you for your care ! I just forked your Gist to recreate the problem https://gist.github.com/Jeremboo/e605ac205f115ef5d50a9b6bb48863a6 but it works well... I will check my dependencies and trying to find the bug.

PS: stylus-loader?sourceMap needs css-loader?sourceMap to work ;)

[Jeremboo]

Sometimes, just remove node_modules and reinstall all dependenties to make miracles... :/

All works with the same dependencies versions (named in my first post) and without other modifications in the webpack config.

Maybe @ImJoeHs will be better to track this bug.

Thank you for your times !

[michael-ciniawsky]

@ImJoeHs Can you also please try by updating all your deps first? I have the feeling that you are especially using a 'old' version of extract-text-webpack-plugin, update it to >=2.0.0 (2.1.0). If you still have any regressions feel free to reopen the issue :)

[ImJoeHs]

@michael-ciniawsky @Jeremboo Thank you! Update css-loader to 0.26.4 and problem solved, seems I forgot to check the newest version of css-loader at that time.

@Jeremboo by the way, you are using '^' so actually the versions are not the same.