Vue: extract-text-webpack-plugin loader is used without the corresponding plugin

[matthiasdv]

When going through the process of setting up a vue/webpack app using the CLI, I am presented with the following error on first try:

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 (/Users/matthiasdevriendt/git/my-project/node_modules/extract-text-webpack-plugin/loader.js:27:9)

Vue.js version

2.2.1

CLI version

2.8.1

node and npm

node 6.9.5
npm 3.10.10

Reproduction link

https://github.com/matthiasdv/vue-bug

steps to reproduce

npm i -g vue-cli 
vue init webpack  ( all defults, no e2e testing)
cd my-project 
npm i && npm i --only=dev
npm run dev

This yields the following trace:

ERROR Failed to compile with 2 errors 11:01:27 PM

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 (/Users/matthiasdevriendt/git/my-project/node_modules/extract-text-webpack-plugin/loader.js:27:9)

 @ ./src/App.vue 3:0-350
 @ ./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 (/Users/matthiasdevriendt/git/my-project/node_modules/extract-text-webpack-plugin/loader.js:27:9)

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

> Listening at http://localhost:3000

what is expected?

A running boilerplate on localhost:3000

what's happening?

The listed error is thrown. Configuration for extract-text-webpack-plugin seems to be missing, although, being boilerplate code generated by the CLI, i don't think this is intended. Can anybody clarify what this plugin is expected to handle in Vue's context?

Thanks!

EDIT:

The relevant lines in extract-text-webpack-plugin/loader.js

var NS = fs.realpathSync(__dirname);

...

if(this[NS] === undefined) {
        throw new 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'
        );
    }

fs is not defined on my environment:

ReferenceError: fs is not defined
    at Object.<anonymous> (/Users/matthiasdevriendt/git/my-project/test.js:1:75)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

[yyx990803]

1. Cannot reproduce with fresh install following exact same steps. This is likely something related to outdated npm cache on your system.

2. Please report CLI related issues to respective templates: https://github.com/vuejs-templates/webpack

[LancelotLewis]

@matthiasdv I have the same problem, add cross-env NODE_ENV=development before dev command can fix this problem

[xdiegom]

I had a similar issue problem.

NPM Version: 5.5.1

NodeJS version: 8.9.0

Vue Installed: 2.5.2

What I notice is that in webpack.dev.conf.js in plugins section there wasn't any plugin added, so what I did was import ExtractTextPlugin in webpack.dev.conf.js and then added in plugins sections like it is added in webpack.prod.conf.js. :

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

//...
plugins: [
//...,
new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // set the following option to `true` if you want to extract CSS from
      // codesplit chunks into this main css file as well.
      // This will result in *all* of your app's CSS being loaded upfront.
      allChunks: false,
    }),
//...
]

//....

My package.json has the dev command like this: "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

One important thing to add here is to make sure that style-loader is installed in the project because it is not installed (in my case) in a fresh install.