Since version 1.8.0: "Error: Cannot read outputFileSystem of a MultiCompiler"

[feluxe]

If I run my web-pack-dev-server I get this error:

Error: Cannot read outputFileSystem of a MultiCompiler

Before I was using 1.6.1 without problems. The error disappears if I go back to 1.6.1. It must have come with the update to 1.8.0.

This is the full error message:

paul@paul-laptop ~/dev_projects/testen $ node node_modules/webpack-dev-server/bin/webpack-dev-server --hot --inline --port 3000 --config webpack.config.page.js
/home/paul/dev_projects/testen/node_modules/webpack/lib/MultiCompiler.js:39
                throw new Error("Cannot read " + name + " of a MultiCompiler");
                ^

Error: Cannot read outputFileSystem of a MultiCompiler
    at MultiCompiler.Object.defineProperty.get (/home/paul/dev_projects/testen/node_modules/webpack/lib/MultiCompiler.js:39:11)
    at module.exports (/home/paul/dev_projects/testen/node_modules/webpack-dev-middleware/middleware.js:59:27)
    at new Server (/home/paul/dev_projects/testen/node_modules/webpack-dev-server/lib/Server.js:54:20)
    at Object.<anonymous> (/home/paul/dev_projects/testen/node_modules/webpack-dev-server/bin/webpack-dev-server.js:188:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3

package.json

{
  "name": "testen",
  "version": "0.0.1",
  "description": "asd",
  "main": "dist/index.js",
  "scripts": {
    "build": "node_modules/webpack/bin/webpack.js --progress --colors --config webpack.config.comp.js && node_modules/webpack/bin/webpack.js --progress --colors --config webpack.config.page.js",
    "production": "node_modules/webpack/bin/webpack.js -p --progress --colors --config webpack.config.comp.js && node_modules/webpack/bin/webpack.js -p --progress --colors --config webpack.config.page.js",
    "watch-comp": "node_modules/webpack/bin/webpack.js --watch --config webpack.config.comp.js",
    "watch-page": "node_modules/webpack/bin/webpack.js --watch --config webpack.config.page.js",
    "dev-server": "node_modules/webpack-dev-server/bin/webpack-dev-server --hot --inline --port 3000 --config webpack.config.page.js",
    "dev": "node node_modules/concurrently/src/main.js --kill-others 'node node_modules/webpack/bin/webpack.js --watch --config webpack.config.comp.js' 'node node_modules/webpack-dev-server/bin/webpack-dev-server --hot --inline --port 3000 --config webpack.config.page.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "asd",
  "license": "asd",
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-airbnb": "^2.0.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "concurrently": "^2.2.0",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-jsx-a11y": "^1.5.5",
    "eslint-plugin-react": "^5.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "imports-loader": "^0.6.5",
    "mkdirp": "^0.5.1",
    "postcss": "^5.0.21",
    "postcss-cssnext": "^2.7.0",
    "postcss-import": "^8.1.2",
    "postcss-loader": "^0.9.1",
    "postcss-modules": "^0.5.0",
    "postcss-object-fit-images": "^1.1.2",
    "react": "^15.2.0",
    "react-addons-css-transition-group": "^15.2.1",
    "react-addons-test-utils": "^15.2.1",
    "react-addons-transition-group": "^15.2.1",
    "react-dom": "^15.2.0",
    "react-hot-loader": "^1.3.0",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "uglify-js": "^2.7.3",
    "webpack": "1.13.2",
    "webpack-dev-server": "^1.15.1",
    "webpack-dev-middleware": "1.8.0"
  },
  "dependencies": {
  }
}

webpack.config

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssCssnext = require('postcss-cssnext');
const postcssImport = require('postcss-import');
const postcssObjectFitImages = require('postcss-object-fit-images');
// const postcssModules = require('postcss-modules');
const CopyWebpackPlugin = require('copy-webpack-plugin');


const loaderHotReload = (src) => {
  return {
    // Hot reaload
    test: /\.jsx?$/,
    loaders: ['react-hot'],
    include: path.resolve(__dirname, src),
    exclude: /(node_modules|bower_components)/,
  };
};

const loaderBabel = (_runtime, target) => {
  const runtime = _runtime || false;
  return {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, target),
    exclude: /(node_modules|bower_components)/,
    query: {
      cacheDirectory: true,
      plugins: runtime ? ['transform-runtime'] : '',
      presets: ['stage-0', 'es2015', 'react'],
    },
  };
};

// CSS Modules, PostCSS Integration
const loaderCss = (src) => {
  return {
    test: /\.css$/,
    include: path.resolve(__dirname, src),
    exclude: /(node_modules|bower_components)/,
    loader: ExtractTextPlugin.extract(
      'style',
      'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' +
      '!postcss-loader'
    ),
  };
};

const pluginHotModuleReplacement = new webpack.HotModuleReplacementPlugin();
// const pluginUglify = new webpack.optimize.UglifyJsPlugin({ compress: { warnings: true } });
const pluginExtractText = (dst) => new ExtractTextPlugin(dst, { allChunks: true });
const pluginCopyFiles = new CopyWebpackPlugin(
  [
    {
      from: 'devPage/index.html',
      to: 'dist/page/index.html',
    },
  ]
);

const postCss = () => [
  postcssImport({ addDependencyTo: webpack }),
  postcssObjectFitImages,
  postcssCssnext({
    browsers: [
      'ie >= 10',
      'Edge >= 12',
      'last 5 Firefox versions',
      'last 5 Chrome versions',
      'Safari >= 8',
      'Opera >= 37',
      'iOS >= 8.4',
      'ie_mob >= 10',
      'Android >= 4.1',
      'OperaMobile >= 37',
      'ChromeAndroid >= 50',
      'FirefoxAndroid >= 46',
    ],
  }),
];

module.exports = [
  //
  // Webpack config for Page.
  //
  {
    entry: {
      'dist/page/bundle.js': ['babel-polyfill', './devPage/Page.jsx', 'webpack/hot/only-dev-server', 'webpack-dev-server/client?http://0.0.0.0:3000'],
    },
    output: {
      path: './',
      filename: '[name]',
      hotUpdateChunkFilename: './tmp/chunks/[id].[hash].page.hot-update.js',
      hotUpdateMainFilename: './tmp/chunks/[hash].page.hot-update.json',
    },
    devtool: 'source-map',
    plugins: [
      pluginHotModuleReplacement,
      pluginExtractText('dist/page/page.css'),
      pluginCopyFiles,
    ],
    module: {
      loaders: [
        loaderHotReload('devPage'),
        loaderBabel(true, 'devPage'),
        loaderCss('devPage'),
      ],
    },
    // PostCSS Plugins
    postcss: postCss,
    resolve: {
      extensions: ['', '.js', '.jsx'],
    },
    debug: true,
    externals: {},
  },
];

[QingWei-Li]

I have the same trouble with config-array.

I noticed this code in 1.8.0 92403e9#diff-27e39f85634d9276821c67a9bbf764b4R59

    var isMemoryFs = compiler.outputFileSystem instanceof MemoryFileSystem;
    if(isMemoryFs) {
        fs = compiler.outputFileSystem;
    } else {
        fs = compiler.outputFileSystem = new MemoryFileSystem();
    }

In fact, if compiler is MultiCompiler, it will not be read outputFileSystem property.
https://github.com/webpack/webpack/blob/17ca14ccd96dcb951c29f6762260cb7a3fc434d0/lib/MultiCompiler.js#L48

[SpaceK33z]

Thanks @QingWei-Li and @feluxe for your help. I've released a patch for this, 1.8.1.