I get the following issue on "npm start"

[Aftabnack]

/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/webpack-dev-middleware/middleware.js:104
            if(err) throw err;
                    ^
Error: invalid argument
    at pathToArray (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/memory-fs/lib/MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/memory-fs/lib/MemoryFileSystem.js:139:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34)
    at Compiler.<anonymous> (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/webpack/lib/Compiler.js:229:25)
    at Compiler.applyPluginsAsync (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/tapable/lib/Tapable.js:61:69)
    at Compiler.emitAssets (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/webpack/lib/Compiler.js:226:7)
    at Watching.<anonymous> (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/webpack/lib/Compiler.js:54:18)
    at /home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/webpack/lib/Compiler.js:403:12
    at Compiler.next (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/tapable/lib/Tapable.js:68:11)
    at Compiler.<anonymous> (/home/aftab/My_Files/Learning/Programming/Web_Dev/React/TypeIt/client/node_modules/webpack/lib/CachePlugin.js:40:4)

This is my configuration file

import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfigBuilder from '../webpack.config';

const webpackConfig = webpackConfigBuilder('development');
const config = webpack(webpackConfig);

let app = express();

const compiler = webpack(config);
const middleware = webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  contentBase: 'src',
  stats: {
    colors: true,
    hash: false,
    timings: true,
    chunks: false,
    chunkModules: false,
    modules: false
  }
});

app.use(middleware);
app.use(webpackHotMiddleware(compiler));
app.get('/test', function response(req, res) {
  res.write(middleware.fileSystem.readFileSync(__dirname+"/../dist/index.html"));
  res.end();
});

app.listen(8089, function onStart(err) {
  if(err) {
    console.log(err);
  }
  console.info("Listening on 8089, open in browser");
});

Where am I going wrong?

[NicholasGWK]

Seeing this as well with a very minimal configuration. Any luck fixing it?

Edit: Potentially related to webpack/memory-fs#9

I have to fix the regex as shown there, and then also make sure my output path in webpack.config.js wasn't relative...ie build/bundles as opposed to ./build/bundles

[Aftabnack]

Nope, no luck.

Tried Replacing the response line in the get request to

res.sendFile(__dirname+"/../dist/index.html");

Still throws up the same error.

[NicholasGWK]

Try logging out the path that's failing in Memory-fs, and see if it correctly starts with what the regex is testing for. I suspect it might not like that /../ in the path.

[Aftabnack]

Tried logging at various points before. But the path I get at applyPluginsAsync itself is empty. So digging further into it now.

[Aftabnack]

Finally figured out the issue.
I was doing webpack config bundling twice

Also in the get handler I changed the handler to serve files only for index.html. Rest all is handled by middleware via next() callback

Checkout the final config

import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfigBuilder from '../webpack.config';
import path from 'path';

const webpackConfig = webpackConfigBuilder('development');
const compiler = webpack(webpackConfig);

let app = express();

const middleware = webpackDevMiddleware(compiler,{
  publicPath: '/',
  contentBase: 'src',
  stats: {
    colors: true,
    hash: false,
    timings: true,
    chunks: false,
    chunkModules: false,
    modules: false
  }
});

app.use(middleware);
app.use(webpackHotMiddleware(compiler));
app.get('/', function response(req, res,next) {
  if(req.url == '/') {
    res.sendFile(path.join(__dirname,'../src/index.html'));
    return;
  }
  next();
});

app.listen(8089, function onStart(err) {
  if(err) {
    console.log(err);
  }
  console.info("Listening on 8089, open in browser");
});

[ritikama]

Finally figured out the issue.
I was doing webpack config bundling twice