Webpack: Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

[ghost]

Thank you for an awesome template.
I have run into this error with Windows 10, node 7.5.0 and npm 4.1.2.
This error is with the boilerplate code unmodified and running with NODE_ENV=production.
There is no error with NODE_ENV=testing or development.

---

ERROR  Failed to compile with 2 errors   

 error  in ./src/App.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (C:\iTurbineIO\Projects\vue-webpack\node_modules\extract-text-webpack-plugin\loader.js:27:9)

 @ ./src/App.vue 3:0-335
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

 error  in ./src/components/Hello.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.module.exports.pitch (C:\iTurbineIO\Projects\vue-webpack\node_modules\extract-text-webpack-plugin\loader.js:27:9)

 @ ./src/components/Hello.vue 3:0-345
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

[ghost]

I tried this template with no errors and NODE_ENV=development, testing and production:
browserify
Possible related issue: 537

[existe-deja]

NODE_ENV=development fixed the problem for me too.

[Turqueso]

Having same problem. Just downloaded the template and get the same error on npm run dev

@Lacroute where did you add NODE_ENV=development?

[existe-deja]

@Turqueso From command line set NODE_ENV=development and if you're on windows you should take a look at your environment variables ;)

[kerf007]

Problem fixed for me too: NODE_ENV=development.
I added it in 'dev' script (for windows): "dev": "cross-env NODE_ENV=development node build/dev-server.js"

[Volcanic-Penguin]

If an unmodified webpack template is giving errors I'd rather just use webpack-simple

[moshie]

This is still an issue and setting NODE_ENV=development is not a fix... It's fundamental this template works setting the node environment to production

to replicate:

$ vue init webpack test
$ cd test/
$ npm install
$ npm run build
$ NODE_ENV=production npm start

[0123cf]

Having same problem. my get the same error on npm run build , ought to where did
add NODE_ENV=development ? @moshie

[victorhazbun]

NODE_ENV=development Should NOT be the solution. Or this template was made for development only?

[srodriki]

I can confirm the build does not work when NODE_ENV=production is set.

In build/utils.js we find the generateLoaders function which seems to be using said plugin, as well as it's used in build/webpack.prod.conf.js

// generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

// extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    })

I haven't been able to find a solution yet (I'm pretty new on how webpack works) but I'll let everyone know if I ever find one.

[helaili]

I found out that webpack.prod.conf was not loaded when NODE_ENV === 'production'. I've solved it as followed in dev-server.js :

var webpackConfig = process.env.NODE_ENV === 'testing' || 'production'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

[srodriki]

@helaili thanks a lot for the fix! Hope your PR is merged soon! I also noticed vue's pwa template has also the same problem so it's likely your fix will help them too. If you don't mind, I might as well do it myself.

Cheers!

[helaili]

Sure @srodriki, go ahead.

[LinusBorg]

I will close this since dev-server.js will be replaced with webpack-dev-server in the coming days (#975) - if this problem persists with the new setup, please open another issue and reference this one in it.

[lodemuyl]

@helaili thanx a lot man

[jmbeach]

I'm still experiencing this issue.