Estoy tratando de hacer serve side rendering en React y todo va bien pero tengo el siguiente problema, cuando abro la app en el localhost me da el siguiente error:
Error: Invariant failed: Browser history needs a DOM
at invariant
Lo raro es que al borrar el código generado por webpack y volver a levantar el servidor para que lo genere no sale este error, pero si yo detengo el servidor y lo vuelvo a levantar me da ese mismo error.
Este es el código del server:
import path from 'path';
import fs from 'fs';
import React from 'react';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import App from '../src/App';
const PORT = process.env.PORT || 3000;
const app = express();
app.get('*', (req, res) => {
const app = ReactDOMServer.renderToString(<App />);
const indexFile = path.resolve('./build/index.html');
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('Ocurrio un error');
}
return res.send(
data.replace('<div id="root"></div>', `<div id="root">${ app }</div>`)
);
});
});
app.use(express.static('./build'));
app.listen(PORT, () => {
console.log(`Servidor escuchando en el puerto: ${ PORT }`);
});
¿Qué puedo hacer?