Configurer le server side rendering ReactJs

lepresk
Javascript

Bonjour,
je voudrais travailler avec le server side rendering de reactjs en utilisant react-scripts

Mais seulement je me retrouve avec du code es2016 et du jsx dans mon fichier seveur.js qui ne passe pas quand je lance la commande

node server.js

Ce que je fais

voici le contenu de mon fichier server.js

import React from "react"
import express from "express"
import {renderToString} from "react-dom/server"
import ServerApp from "./ServerApp"
import store from './store'
const app = express()

app.get('*', (req, res) => {
    const html = renderToString(<ServerApp url={req.url} />);
    const preloadedState = store.getState()
    res.send(renderFullHtml(html, preloadedState));
})
console.log("=== SERVER STARTED ===")
app.listen(8080)

function renderFullHtml (html, preloadedState) {
    return `
        <!doctype html>
        <html>
            <head>
                <title>Ma page</title>
                <mata charset="utf-8" />
            </head>
            <body>
                <div id="root">${html}</div>
                <script>
                        window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
                </script>
                <script src="/static/bundle.js"></script>
            </body>
        </html>
    `
}

le fichier ServerApp.js

import React from "react"
import {StaticRouter} from "react-router-dom"
import Routes from "./Routes"
import {Provider} from "react-redux"
import store from './store'

const ServerApp = props => {
    <Provider store={store}>
        <StaticRouter context={} location={props.url}>
          <ServerRoutes />
      </StaticRouter>
    </Provider>
}

Ce que j'obtiens

quand je lance la commande j'obtient une erreur

C:\xampp\htdocs\mybay\webroot\front\src\server.js:1
(function (exports, require, module, __filename, __dirname) { import React from "react"
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Ce que je veux

je voudrais que la transpilation de es2016 ansi que jsx je fasse au fur et a mesure je code pour que je puisse demarrer mon serveur.

merci!

1 réponse

Defy

pour utiliser toute les features ES6 avec node et notament import et autre il faut soit transpiler le code avec babel soit passer a une version de node plus recente (8 ou 9)