The stack I'm working with consists of node, express, webpack, redux, react-router, and react. My express server looks as follows:
import Express from 'express';
import { Server } from 'http';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { StaticRouter } from 'react-router-dom';
import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import App from './src/App';
import routes from './src/routes';
import reducer from './src/reducer';
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'src'));
app.use(Express.static(path.join(__dirname, 'clients/Sample/bundle')));
const store = createStore(
reducer,
{},
applyMiddleware(thunkMiddleware),
);
app.get('*', (req, res) => {
const context = {};
const markup = renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<App routes={routes} />
</StaticRouter>
</Provider>,
);
return res.render('index', { markup });
});
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, (err) => { // eslint-disable-line consistent-return
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
});
The application works perfectly if I attempt to access it directly on http://localhost:3000/. From there, I can navigate to other pages without issues. However, if I try to visit one of those other pages directly in the URL (e.g. http://localhost:3000/user) the console displays the following stack trace:
Uncaught Error: Unable to find element with ID 15.
at invariant (vendor.js:1)
at precacheChildNodes (vendor.js:1)
at Object.getNodeFromInstance (vendor.js:1)
at Object.didPutListener (vendor.js:1)
at Object.putListener (vendor.js:1)
at Object.putListener (vendor.js:1)
at CallbackQueue.notifyAll (vendor.js:1)
at ReactReconcileTransaction.close (vendor.js:1)
at ReactReconcileTransaction.closeAll (vendor.js:1)
at ReactReconcileTransaction.perform (vendor.js:1)
This then breaks navigation on the site, and redux state changes too. I've identified the element with this ID as being a imported from react-router-dom. I did find GitHub issues describing similar errors (one and two), sadly though the proposed solutions haven't worked for me. Any suggestions on what might be causing this for me?
