はSSRにReferenceErrorに反応：文書が、私は、サーバー側の反応レンダリングするためにトラブルを抱えています

Question

が定義されていません。私はいつも ^

ReferenceError: document is not defined

var root = document.getElementById('root');

私は、ブラウザのドキュメントオブジェクトを理解dosen'tそのノードをhappingれているものを知っているを取得します。しかし、私はそれを修正するように思わない。 webpackやサーバーやapp.jsで何か問題が起きていますか？ここ

は私のコードは

server.jsついに

import express from 'express'; 
import path from 'path'; 
import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { StaticRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import configureStore from './src/store/configureStore'; 
import routes from './src'; 

const app = express(); 

app.use(express.static(path.join(__dirname, 'build'))); 

/** 
* React application route, supports server side rendering. 
*/ 
app.get('/*', function(req, res) { 
    // Create a context for <StaticRouter>, which will allow us to 
    // query for the results of the render. 
    const reactRouterContext = {}; 

    // Compile an initial state 
    const preloadedState = {}; 

    // Create a new Redux store instance 
    const store = configureStore(preloadedState); 

    // Declare our React application. 
    const app = (
    <Provider store={store}> 
     <StaticRouter location={req.url} context={reactRouterContext}> 
     {routes} 
     </StaticRouter> 
    </Provider> 
); 
    const appString = renderToString(app); 
    // Load contents of index.html 
    fs.readFile(
    path.join(__dirname, 'build', 'index.html'), 
    'utf8', 
    (err, data) => { 
     if (err) throw err; 

     // Inserts the rendered React HTML into our main div 
     const document = data.replace(
     /<main id="root"><\/main>/, 
     `<main id="root">${app}</main>` 
    ); 

     // Sends the response back to the client 
     res.status(200).send(); 
    } 
); 
}); 

app.listen(9000); 

webpack.config.node.js

const fs = require('fs'); 
const path = require('path'); 
const webpack = require('webpack'); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 

// http://jlongster.com/Backend-Apps-with-Webpack--Part-I 
let nodeModules = {}; 
fs 
    .readdirSync('node_modules') 
    .filter(function(f) { 
    return f.charAt(0) !== '.'; 
    }) 
    .forEach(function(f) { 
    nodeModules[f] = 'commonjs ' + f; 
    }); 

module.exports = { 
    target: 'node', 
    entry: './server.js', 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'server.js', 
    libraryTarget: 'commonjs2', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react', 'stage-0'], 
     }, 
     }, 
     { 
     test: /\.css$/, 
     exclude: /node_modules/, 
     loader: 'css-loader', 
     }, 
     { 
     test: /\.(gif|png|jpe?g|svg)$/i, 
     use: [ 
      'file-loader', 
      { 
      loader: 'image-webpack-loader', 
      options: { 
       bypassOnDebug: true, 
      }, 
      }, 
     ], 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     PRODUCTION: JSON.stringify(true), 
    }), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
    }), 
    //new UglifyJSPlugin(), 
    ], 
    externals: nodeModules, 
}; 

そして、私のapp.js

import React from 'react'; 
import { hydrate, render } from 'react-dom'; // eslint-disable-line 
import { Provider } from 'react-redux'; 
import { BrowserRouter, Route } from 'react-router-dom'; 
import configureStore from './store/configureStore'; 
import Home from './routes/home'; 
import Profile from './routes/profile'; 
import Contact from './routes/contact'; 
import RouterWrapper from './routeWrapper'; 
import './index.css'; 

const store = configureStore(); 
window.store = store; 

// Does the user's browser support the HTML5 history API? 
// If the user's browser doesn't support the HTML5 history API then we 
// will force full page refreshes on each page change. 
const supportsHistory = 
    window && window.history && 'pushState' in window.history ? true : false; 

const routes = (
    <div> 
    <RouterWrapper> 
     <Route exact path="/" component={Home} /> 
     <Route path="/profile" component={Profile} /> 
     <Route path="/contact" component={Contact} /> 
    </RouterWrapper> 
    </div> 
); 

const app = (
    <Provider store={store}> 
    <BrowserRouter forceRefresh={!supportsHistory}>{routes}</BrowserRouter> 
    </Provider> 
); 

const root = document.getElementById('root'); 

const renderApp = newRoot => { 
    if (process.env.NODE_ENV === 'development') { 
    render(app, newRoot); 
    } else { 
    hydrate(app, newRoot); 
    } 
}; 

renderApp(root); 

export default routes; 

Answer 1

されています

ファイルをインポートすると、ent const root = document.getElementById('root');行を含むファイルの内容が実行されます。

routes宣言を別のファイルに移動してそこからエクスポートすると、server.jsとapp.jsの両方でそのファイルをインポートできるはずです。

Answer 2

ちょうどあなたのroutes別のファイルに移動します。インポートすると、ファイル全体が実行され、エラーが発生します。