Estoy trabajando en SSR con reaccionar pero encuentro el siguiente error.
Error de sintaxis: Token inesperado '<'`
<div id="root">${ReactDOMServer.renderToString(<App />)}</div>``` ^ Como se mencionó está aquí
babel-registerno procesa el archivo desde el que se llama.
Por lo tanto, declaré correctamente mis dependencias de babel en un nuevo archivo, sin embargo, sigo recibiendo el error anterior.
A continuación se muestra mi archivo index.js
import babelRegister from '@babel/register'; import ignoreStyles from 'ignore-styles'; babelRegister({ ignore: [/node_modules/], presets: ['@babel/preset-env', '@babel/preset-react'], }); import express from 'express'; import appRender from './server.js'; const app = express(); appRender(app); Mi archivo server.js .
import initialRenderRoutes from './routes/initialRenderRoutes.js'; import path from 'path'; const appRender = (app) => { const __dirname = path.resolve(); app.use(express.static(path.resolve(__dirname, '../build'))); app.use('*', initialRenderRoutes); const port = 5000; app.listen(port, () => console.log(`Server running on port ${port}`)); }; export default appRender; Mi archivo initialController.js
import fs from 'fs'; import ReactDOMServer from 'react-dom/server.js'; import path from 'path'; import App from '../../src/App.js'; const initialRenderController = (req, res, next) => { console.log(path.resolve()); fs.readFile( path.resolve('../client/build/index.html'), 'utf8', (err, data) => { if (err) { console.log(err); return res.status(500).send('Internal Server Error'); } return res.send( data.replace( '<div id="root"></div>', `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>` <<<<The problem lies here>>>> ) ); } ); }; export default initialRenderController;Es algo relacionado con babel, por favor ayuda.
Pruebe los siguientes cambios en su archivo index.js ,
require('ignore-styles'); require('@babel/register')({ ignore: [/(node_modules)/], presets: ['@babel/preset-env', '@babel/preset-react'] }); require('./server'); require('./initialController');Lo anterior debería funcionar, probé localmente lo siguiente, funciona perfectamente bien.
Mi server.js
import express from 'express'; import fs from 'fs'; import path from 'path'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from '../App'; const app = express(); app.use('^/$', (req, res, next) => { fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => { if (err) { console.log(err); return res.status(500).send("Some error occurred") } return res.send(data.replace('<div id="root"></div>', `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`)) }) }); app.use(express.static(path.resolve(__dirname, "..", "build"))); app.listen(5000, ()=>{ console.log("App running on port 5k") })índice.js
require('ignore-styles'); require('@babel/register')({ ignore: [/(node_modules)/], presets: ['@babel/preset-env', '@babel/preset-react'] }); require('./server');Espero que tenga el archivo .babelrc con los ajustes preestablecidos necesarios.
Actualización en respuesta al comentario:
Considere eliminar type: "module" , ya que generará un error cuando use require . @babel/register ejecutará archivos usando babel sobre la marcha . El gancho require se enlazará con el require del nodo y compilará automáticamente los archivos en tiempo de ejecución . server.js usando el módulo es no chocará si elimina el type: "module" . El orden de los asuntos require , requerimos babel-register en index.js con los ajustes preestablecidos necesarios para reconocer las sintaxis en el server.js requerido en ese momento.
Creo que hay dos cosas que deben cambiarse. Uno en su initialControler.js está usando la exportación predeterminada en un archivo node.js, use module.exports module.exports vs. export default en Node.js y ES6
Debe cambiar todas las importaciones en sus archivos de nodo.
Usa exportar/exportar por defecto en React y luego importa para extraer los archivos https://www.geeksforgeeks.org/reactjs-importing-exporting/
module.exports y require para extraer los archivos para Node. ¿Cuál es el propósito de Node.js module.exports y cómo se usa?
En segundo lugar, movieron app.get a ese archivo renderReact.js y luego lo requirieron en su archivo index.js . Sin embargo, en su archivo server.js no lo veo importando en su archivo initialController.
Según tu ejemplo, parece que deberías estar haciendo algo como esto:
Servidor.js
let initialController = require('/path to this file'); initialController(app)No pierdas el tiempo leyendo pergaminos. Todo lo que necesita hacer es eliminar cualquier espacio b4 y después de cada ><
const val= ReactDOMServer.renderToString(<App />); /// make sure you don't have any sort of space /// between them > < and yow ${} /// is better if you store that long text into an small var, as I did to ///prevent prettier or some other 💩 to add a line break of an space return res.send( `<div id="root">${val}</div>`);