React SSR：文档未定义答案

【问题标题】：React SSR: Document is not definedReact SSR：文档未定义
【发布时间】：2019-06-12 20:51:05
【问题描述】：

我已经为此工作了两天。浏览了多个堆栈帖子，仍然没有找到合适的答案。

我正在尝试在服务器中呈现我的反应项目，如下所示：

Server.js

function handleRender(req,res){

  const sheetsRegistry = new SheetsRegistry();

  const sheetsManager = new Map();

  const theme = createMuiTheme({
    palette:{
      primary:green,
      accent: red,
      type: 'light',
    }
  })

  const generateClassName = createGenerateClassName();

  const html = ReactDOMServer.renderToString(
    <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
      <MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
        <TwoFA />
      </MuiThemeProvider>
    </JssProvider>
  )

  const css = sheetsRegistry.toString()

  res.send(renderFullPage(html,css))
}

function renderFullPage(html,css){
  return   `
    <!DOCTYPE html>
    <html>
      <head>
        <title>2FA SDK</title>
      </head>
      <body style="margin:0">
        <div id="app">${html}</div>
        <script id="jss-server-side">${css}</script>
      </body>
    </html>
  `
}

Client.js：

import React from 'react';
import ReactDOM from 'react-dom';
import TwoFA from './App';
import {
    MuiThemeProvider,
    createMuiTheme,
    createGenerateClassName,
  } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import red from '@material-ui/core/colors/red';

class Main extends React.Component{
    componentDidMount() {
        const jssStyles = document.getElementById('jss-server-side');
        if (jssStyles && jssStyles.parentNode) {
          jssStyles.parentNode.removeChild(jssStyles);
        }
    }

    render(){
        return <TwoFA />
    }
}

const theme = createMuiTheme({
    palette: {
      primary: green,
      accent: red,
      type: 'light',
    },
  });

const generateClassName = createGenerateClassName();

if (typeof window !== 'undefined'){
    ReactDOM.hydrate(
        <JssProvider generateClassName={generateClassName}>
          <MuiThemeProvider theme={theme}>
              <TwoFA/>
          </MuiThemeProvider>
        </JssProvider>,
        document.querySelector('#app'),
    );
}

Webpack.config.js

module.exports = [
    {
        /*Config for backend code*/ 
        entry: './src/server/server.js',
        output: {
            filename: 'server.js'
        },
        externals: [nodeExternals()],
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename:"[id].css"
            })
        ]
    },
    { 
        entry: './src/client.js',
        output: {
           filename: 'bundle.js',
        },
        module: {
           rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ],
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename:"[id].css"
            })
        ]
    }
]

我尝试过的： 我在 SO 上进行搜索，发现许多帖子建议进行条件检查，如下所示：if (typeof window !== 'undefined')。但是，这并不能解决问题。

我也了解到这个错误是由于在SSR期间，服务器端没有文档项目。

我在 github 问题页面上搜索过，有人提到他遇到了 webpack 的问题，但同一个项目在 browserify 上运行良好。

我需要什么帮助：我正在尝试解决这个问题，因为它会导致应用崩溃。

我怀疑 webpack 有问题。我正在寻找解决此问题的方法

【问题讨论】：

MiniCssExtractPlugin 可能不得不受到指责

标签： javascript reactjs webpack material-ui server-side-rendering

【解决方案1】：

这个问题通常是因为在服务器上渲染 react 时发生的。它在服务器端没有文档或窗口对象，这些对象仅在浏览器上可用。

尝试在componentDidMount 中或之后调用文档函数。

componentDidMount(){
  this.setState({documentLoaded:true});
}

someFunction(){
  const { documentLoaded } = this.state;
  if(documentLoaded){
     // LOGIC USING DOCUMENT OBJECT
  }
}

【讨论】：

【解决方案2】：

如果您使用 react-hooks，您可以创建自定义 useDocument 挂钩：

import React, { useEffect, useState } from 'react'

export const useDocument = () => {
  const [myDocument, setMyDocument] = useState(null)
   
  useEffect(() => {
    setMyDocument(document)
  }, [])

  return myDocument
}

在您的组件中：

...
const doc = useDocument()
...

<SomeComponent
 ref={doc && doc.body}
 ...
/>
...

【讨论】：