ReactDOM.renderToSsortingng sessionStorage n’est pas défini, la fenêtre n’est pas définie

J’ai une application avec Webpack configurée en tant que module de groupement et babel en tant que compilateur js. tous sur un moteur de noeud. Je me suis dit que quand j’exécuterai npm run dev le stream suivant se produira:

webpack-dev-server.js s’exécutera. le fichier est le suivant:

 const Express = require('express'); const webpack = require('webpack'); const webpackConfig = require('./dev.config'); const comstackr = webpack(webpackConfig); const host = 'localhost'; const port = 8080; const serverOptions = { contentBase: `http://${host}:${port}`, quiet: true, noInfo: true, hot: true, inline: true, lazy: false, publicPath: webpackConfig.output.publicPath, headers: { 'Access-Control-Allow-Origin': '*' }, stats: { colors: true }, }; const app = new Express(); app.use(require('webpack-dev-middleware')(comstackr, serverOptions)); app.use(require('webpack-hot-middleware')(comstackr)); app.listen(port, function onAppListening(err) { if (err) { console.error(err); } else { console.info('==> Webpack development server listening on port %s', port); } }); 

Puis le server.js

 require('./../server.babel'); const path = require('path'); const WebpackIsomorphicTools = require('webpack-isomorphic-tools'); const rootDir = path.resolve(require('../server/config').rootDir); global.__CLIENT__ = false; global.__SERVER__ = true; global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production'; if (__DEVELOPMENT__) { if (!require('piping')({ hook: true, ignore: /(\/\.|~$|\.json|\.scss$)/i })) { return; } } global.webpackIsomorphicTools = new WebpackIsomorphicTools(require('../webpack/webpack-isomorphic-tools')) .development(__DEVELOPMENT__) .server(rootDir, () => { require('../server/server'); }); 

rendu express et réactif:

 import 'babel-polyfill'; // Server import express from 'express'; import session from 'express-session'; import cookieParser from 'cookie-parser'; // React import React from 'react'; import ReactDOM from 'react-dom/server'; import createHistory from 'react-router/lib/createMemoryHistory'; import { match } from 'react-router'; // Redux import { Provider } from 'react-redux'; import { ReduxAsyncConnect, loadOnServer } from 'redux-connect'; import { syncHistoryWithStore } from 'react-router-redux'; import path from 'path'; import csurf from 'csurf'; import bodyParser from 'body-parser'; // Relative imports import Html from '../shared/html'; import proxy from './proxy'; import createStore from '../shared/redux/create'; import { staticPath } from './config'; import { getRoutes } from '../shared/routes'; require('dotenv').config({ path: path.resolve(__dirname, '../.env'), }); const SERVER_PORT = process.env.SERVER_PORT; const APP_SECRET = process.env.APP_SECRET; const API_PORT = process.env.API_PORT; const API_HOST = process.env.API_HOST; function renderPage({ renderProps, store, res, client, csrfToken }) { loadOnServer({ ...renderProps, store, helpers: { client } }) .then(() => { const component = (    ); res.status(200); res.send('\n' + ReactDOM.renderToSsortingng( , ), ); }) .catch((err) => { console.error(err.stack); }); } const app = express(); const csrf = csurf(); // express middlewares // app.use(favicon(path.resolve(__dirname, '../static/favicon.ico'))); @TODO favicon @ilanus app.use(bodyParser.json()); app.use(express.static(staticPath)); app.use(cookieParser(APP_SECRET)); app.use(session({ secret: APP_SECRET, saveUninitialized: true, resave: true, })); app.use(csrf); app.use('/api', (req, res) => { if (!req.xhr) res.redirect('/'); proxy.web(req, res, { target: `http://${API_HOST}:${API_PORT}` }); }); app.use((req, res) => { const csrfToken = req.csrfToken(); if (__DEVELOPMENT__) { // Do not cache webpack stats: the script file would change since // hot module replacement is enabled in the development env webpackIsomorphicTools.refresh(); } const memoryHistory = createHistory(req.originalUrl); const store = createStore({}, memoryHistory); const history = syncHistoryWithStore(memoryHistory, store); match({ history, routes: getRoutes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => { if (redirectLocation) { res.redirect(redirectLocation.pathname + redirectLocation.search); } else if (error) { console.error('ROUTER ERROR:', error); res.status(500); } else if (renderProps) { renderPage({ renderProps, store, res, csrfToken }); } else { res.status(404).send('Not found'); } }); }); app.use((err, req, res) => { if (err === 'EBADCSRFTOKEN') { res.status(403); res.send('invalid csrf token'); } else { res.status(500); res.send('Oops, internal server error'); } }); app.listen(SERVER_PORT, (error) => { if (error) { console.error(error); } else { console.info(`App started listening on port ${SERVER_PORT}`); } }); 

Maintenant, chaque fois que j’essaie de console.log('window', window, 'sessionStorage', sessionStorage); dans une fonction render() ou componentDidMount() d’un composant de réaction, je me retrouve avec: sessionStorage is not defined, window is not defined erreur. Je suppose que c’est parce que j’utilise la stack côté serveur et que celles-ci ne sont pas disponibles là-bas. Qu’est-ce qui me manque?

Vous avez simplement besoin d’une fonction au lieu d’accéder directement à la fenêtre et aux propriétés de la fenêtre, par exemple:

 function globalObj(){ const isNode = typeof process === 'object' && process.versions && !!process.versions.node; return isNode ? global : window; } 

Vous pouvez accéder à la session session, etc. de manière universelle, sans erreurs.

 globalObj()["sessionStorage"] 

J’espère que ça aide.