Obtengo un comportamiento extraño cuando trato de implementar la representación del lado del servidor en una aplicación de reacción.

 ... Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. ...

Me di cuenta de que hay un problema general con los archivos de procesamiento con la extensión JSX. Así es como se ve mi código.

./servidor/servidor.js

 app.use('/*', (req, res, next) => { const context = {}; const app = ReactDOMServer.renderToString( <App /> ); console.log(app) fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => { if (err) { console.log(err); return res.status(500).send("Some Error") } return res.send( data.replace( '<div id="root"></div>', `<div id="root">${app}</div>` ) ) }) })

./servidor/index.js

 require("ignore-styles") require("@babel/register")({ ignore: [/(node_module)/], presets: ['@babel/preset-env', '@babel/preset-react'] }) require('./server')

./src/Aplicación.jsx

 import './App.scss'; import React from 'react'; function App() { return ( <div className='app'> <p>Sample</p> </div> ); } export default App;

./src/index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.scss'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter as Router } from "react-router-dom"; ReactDOM.hydrate( <Router> <React.StrictMode> <App /> </React.StrictMode> </Router>, document.getElementById('root') ); reportWebVitals();

Y el error ocurre cuando está en ../server/server.js:17:30 que es cuando se llama a ReactDOMServer.renderToString . El problema es que el componente se ve como un objeto vacío después de importarlo. Tengo la sensación de que es un problema con Babel, pero no estoy seguro.