Estoy intentando implementar SSR para una aplicación React que comencé con la creación de un directorio de servidor que contiene 3 archivos (bootstrap, índice, renderizador)
bootstrap.js contiene babel configs para transpilar a es5
index.js crear una aplicación express y express Router
renderer.js es responsable de representar React application to string y enviarla como html al cliente.
bootstap.js ?
require('ignore-styles');
require('@babel/register')({
ignore: [
function (filePath) {
return !filePath.includes('node_modules');
}
],
presets: [
[
"@babel/preset-env",
{
"modules": false
}
],
'@babel/preset-react',
'@babel/flow'
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
],
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import",
"react-loadable/babel",
"@babel/plugin-proposal-class-properties",
"dynamic-import-node"
]
});
require('./index');
index.js ?>
import dotenv from 'dotenv';
import cookieParser from 'cookie-parser';
dotenv.config();
const express = require('express');
const serverRenderer = require('./middleware/renderer');
const PORT = process.NODE_ENV === 'development' ? 3000 : 7160;
const path = require('path');
const app = express();
app.use(cookieParser());
const router = express.Router();
const routes = require('../src/router/appRoutes').default;
router.use(express.static(
path.resolve(__dirname, '..', 'build'),
{ maxAge: '30d' },
));
routes.map(path => app.get(path, serverRenderer));
app.use(router);
app.listen(PORT, (error) => {
if (error) {
return console.log('something bad happened', error);
}
console.log("listening on " + PORT + "...");
});
pero cuando corro
NODE_ENV=production node server/bootstrap.js
este comando para iniciar la aplicación del lado del servidor obtengo este error
import dotenv from 'dotenv';
^^^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Module._compile (/Users/amirtahani/projects/uneed/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Object.newLoader [as .js] (/Users/amirtahani/projects/uneed/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/Users/amirtahani/projects/uneed/server/bootstrap.js:34:1)
y lo raro es que el mismo código está trabajando en otro proyecto. y aquí está mi devDependencies
"devDependencies": {
"@babel/core": "7.6.4",
"@babel/plugin-proposal-class-properties": "7.5.5",
"@babel/plugin-proposal-object-rest-spread": "7.6.2",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-classes": "7.5.5",
"@babel/plugin-transform-modules-commonjs": "7.6.0",
"@babel/plugin-transform-runtime": "7.6.2",
"@babel/preset-env": "7.6.3",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.6.3",
"@babel/register": "7.6.2",
"babel-cli": "6.26.0",
"babel-plugin-dynamic-import-node": "2.3.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
"flow-bin": "0.102.0",
"ignore-styles": "5.0.1"
}
alguna idea?
Nuevas preguntas
node.js
Node.js es un tiempo de ejecución de E / S asíncrono, sin bloqueo y basado en eventos que utiliza el motor JavaScript V8 de Google y la biblioteca libuv. Se utiliza para desarrollar aplicaciones que hacen un uso intensivo de la capacidad de ejecutar JavaScript tanto en el cliente como en el lado del servidor y, por lo tanto, se benefician de la reutilización del código y la falta de cambio de contexto.