Question

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

我正尝试在服务器中渲染我的react项目，如下所示：

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期间服务器端没有 document 项目而引起的。

我在github问题页面上进行了搜索，有人提到他遇到了webpack的问题，但是同一项目在browserify上运行正常。

我需要帮助的地方：我正在尝试解决此问题，因为它会导致应用程序崩溃。

我怀疑webpack出了点问题。我正在寻找解决方法

Answer 1

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

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

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

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

Answer 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}
 ...
/>
...

React SSR：未定义文档

2 个答案: