Vue-loader: 8.6.1 : 'TypeError: loader.charAt is not a function' in webpack 2.2.1

[DeepenLau]

I use webpack2.2.1 in vue1.0.28 , when i use extract-text-webpack-plugin in webpack configuration like this

  ...
  var ExtractTextPlugin = require('extract-text-webpack-plugin')

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            stylus: ExtractTextPlugin.extract({
              use: [
                'css-loader?{discardComments:{removeAll:true}}',
                'stylus-loader'
              ],
              fallback: 'vue-style-loader'
            })
          },
          postcss: [
            require('autoprefixer')({
              browsers: ['> 0.1% in CN']
            })
          ]
        }
      }
    ]
  },
  ...
  plugins: [
    ...
    new ExtractTextPlugin({
      filename: '[name].[contenthash:8].css',
      disable: false,
      allChunks: true
    })
    ...
  ]
  ...

and it show me this message:
"Module build failed: TypeError: loader.charAt is not a function"
when i remove the extract-text-webpack-plugin like this

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            stylus: 'vue-style-loader!css-loader!stylus-loader'
          },
          postcss: [
            require('autoprefixer')({
              browsers: ['> 0.1% in CN']
            })
          ]
        }
      }
    ]
  }

then it works.
by the way, webpack2.2.1 must use the new version of extract-text-webpack-plugin, so the latest version is
"extract-text-webpack-plugin": "^2.0.0-rc.3",
so, i do not know it is my wrong in somewhere or it is a bug.
please help, thanks a lot!

---

update at 19:37 in china
I switched the version of "extract-text-webpack-plugin" to "^2.0.0-beta.5" and change my configuration in this code

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            stylus: ExtractTextPlugin.extract({
              loader: 'css-loader?{discardComments:{removeAll:true}}!stylus-loader',
              fallback: 'vue-style-loader'
            })
          },
          postcss: [
            require('autoprefixer')({
              browsers: ['> 0.1% in CN']
            })
          ]
        }
      }

finally, "extract-text-webpack-plugin" works

[xsbchen]

extract-text-webpack-plugin 2.0.0-rc.3 has some breaking changes, vue-loader 8.6.1 did not support it

[yyx990803]

Should be fixed in 8.7.0 - thanks for the PR @xsbchen !

[ijse]

I get the same error when upgrade to webpack2, with dependencies bellow:

• "webpack": "^2.2.1",
• "vue-loader": "^10.3.0",
• "extract-text-webpack-plugin": "^2.0.0-beta.5",
• "vue": "^2.1.8",

and still dont know why yet

[xsbchen]

@ijse can you show your webpack.config.js?

[ijse]

@xsbchen I have solved the problem. The reason is double-checked *.vue files with eslint-loader.

But the error is really weired.

[breeswish]

Still facing this error.

console.log(loader) in ensureBang gives me:

{ loader: 'babel-loader',
  options: { ... } }

which definitely is an object.

config:

...
{
  ...
  use: {
    test: ... ,
    loader: 'vue-loader',
    options: {
      loaders: {
        js: {
          loader: 'babel-loader',
          options: { ... },
        },
        ...
      },
    },
  },
}

[yyx990803]

@breeswish currently the loaders option for vue-loader only accept string loaders. Objects will be supported in the next release.

[June215]

# Module build failed: TypeError: loader.charAt is not a function
npm run build ,build error
@yyx990803 Please help me analyze it. thank you~

• "webpack": "2.1.0-beta.20",
• "vue-loader": "^9.3.2",
• "vue": "^2.0.0",
• "extract-text-webpack-plugin": "^2.0.0-beta.3",

[xsbchen]

  "devDependencies": {
    "webpack": "^2.6.1",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.0.0"
  }

@June215 try this

[June215]

Thanks to @xsbchen .

[Genuifx]

@yyx990803 sorry to disturb you, but with vue 1.xand webpack 2x, the bug still here. see 174 line

could you spend some time to fix it?

[jackmcdade]

Just ran into this issue. Seems to still be a problem with Vue1 + webpack 2.