webpack-dev-middleware: Conflict with html-webpack-plugin on catch all route

I have a single page app and I am using the middleware during dev. I want to route all requests in express to the index.html file so that my spa router takes over. There seems to be a problem with webpack-dev-middleware trying to detect the file or path, which prevents me from rendering the index.html file with the html-webpack-plugin.

Here is essentially what I have:

// webpack.config
    new HtmlWebpackPlugin({
      template : paths.src('index.html'),
      hash     : true,
      filename : 'index.html',
      inject   : 'body'
    })

// server.js
const devMiddleware = WebpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  contentBase: paths.project(config.get('dir_src')),
  hot: true,
  quiet: true,
  noInfo: false,
  lazy: false,
  stats: {
    colors: true
  },
  historyApiFallback: true
});
app.use(devMiddleware);

app.use((req, res, next) => {
  console.log('Final Request', req.url, req.method, req.accepts('html'));
  if (req.method === 'GET' && req.accepts('html')) {
    //res.sendFile(paths.src('index.html'), err => err && next());
    res.write(devMiddleware.fileSystem.readFileSync(paths.src('index.html')));
    res.send();
    next();
  } else next();
});

This results in the following error:

Error: no such file or directory
   at MemoryFileSystem.readFileSync (node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
   at build/webpack-dev-server.js:74:40
   at Layer.handle [as handle_request] (node_modules/express/lib/router/layer.js:95:5)
   at trim_prefix (node_modules/express/lib/router/index.js:312:13)
   at node_modules/express/lib/router/index.js:280:7
   at Function.process_params (node_modules/express/lib/router/index.js:330:12)
   at next (node_modules/express/lib/router/index.js:271:10)
   at middleware (node_modules/webpack-hot-middleware/middleware.js:32:48)
   at Layer.handle [as handle_request] (node_modules/express/lib/router/layer.js:95:5)
   at trim_prefix (node_modules/express/lib/router/index.js:312:13)
   at node_modules/express/lib/router/index.js:280:7
   at Function.process_params (node_modules/express/lib/router/index.js:330:12)
   at next (node_modules/express/lib/router/index.js:271:10)
   at node_modules/webpack-dev-middleware/middleware.js:166:12
   at continueBecauseBundleAvailible (node_modules/webpack-dev-middleware/middleware.js:58:5)
   at Array.forEach (native)

I confirmed the path is correct and could be read with: fs.readFileSync(paths.src('index.html')). However it appears the upstream library may have an issue.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 1
  • Comments: 15

Most upvoted comments

I ended up figuring this out: https://github.com/davezuko/react-redux-starter-kit/pull/202/files

Webpack Dev Server uses connect-history-api-fallback as a dependency. So after installing that and running it before the middleware, it handled things as expected.