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
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.@patrickheeney Maybe this example can help