窗口未使用服务器端渲染 React 和 Express 定义

Posted 2023-02-22

【中文标题】窗口未使用服务器端渲染 React 和 Express 定义

【英文标题】：Window is not defined with Server Side Rendering React and Express

【发布时间】：2018-04-26 09:09:54

【问题描述】：

请注意，我使用的是Turbo360，您可以在https://www.turbo360.co/ 找到更多信息，但我向您保证，它的工作方式与 express 完全相同，因此错误不是来自这里。

我与一些人交谈过，据我收集的信息，此错误来自我调用 cont initialState = window.INITIAL_STATE; 的入口点。

当我在服务器端访问我的后端路由时会触发此错误。然而，路由本身确实在后端成功，我的意思是，如果我要记录数据，我会让用户恢复成功。

但是在前端我得到了这个：

我会尽量不把它弄得乱七八糟，所以你必须对 s-s-r 有一些很好的了解。 s-s-r 部分工作得很好，直到我到达我的后端快速路线。因此，除非有必要添加，否则我会将代码保留给那些。

反应入口点：

import React,  Component  from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  BrowserRouter  from 'react-router-dom';
import  renderRoutes  from 'react-router-config';

import store from './stores';
import routes from './routes';

const initialState = window.INITIAL_STATE; //WHERE I BELIEVE ERROR IS COMMING FROM

ReactDOM.hydrate(
  <Provider store=store.configure(initialState)>
    <BrowserRouter>
      <div>renderRoutes(routes)</div>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

服务器入口点：

require('babel-core/register')(
  presets: ['env', 'react', 'stage-0', 'stage-1']
);

const pkg_json = require('./package.json');
const vertex = require('vertex360')( site_id: pkg_json.app );
var renderer = require('./renderer.js');

// initialize app
const app = vertex.app();

// import routes
const index = require('./routes/index');
const api = require('./routes/api');
const users = require('./routes/users');

// set routes
app.use('/api/users', users);

// hopefully will be used on every Route, this should handle s-s-r RR4
app.use(renderer);

module.exports = app;

服务器端用户注册路由：

router.post('/register', (req, res) => 
  const body = req.body;

  if (body.username.length == 0) 
    res.json(
      confirmation: 'fail',
      message: 'Please enter an username address.'
    );

    return;
  

  if (body.password.length == 0) 
    res.json(
      confirmation: 'fail',
      message: 'Please enter a password.'
    );

    return;
  

  turbo
    .createUser(body)
    .then(data => 
      res.json(
        confirmation: 'success',
        user: data
      );
    )
    .catch(err => 
      res.json(
        confirmation: 'fail',
        message: err.message
      );
    );
);

行动：

axios.post('/api/users/register', params)
  .then(response =>  console.log(response.data );
  .catch(err =>  console.log(err); );

【问题讨论】：

试试这个：***.com/a/46908295/2557517

【参考方案1】：

查看代码应该做的第一个修复是

cont initialState = typeof window !== "undefined" && window && window.INITIAL_STATE;.

这应该可以理想地为您解决窗口未定义问题。 由于在执行 s-s-r 时，窗口对象将不存在，因为它是浏览器级别的对象。

【讨论】：

仍然收到window is not defined

如果您需要更多代码来提供帮助，请告诉我。

@TaylorAustin 我们可以在 Team Viewer 上连接，以便我更好地调试吗？

我从未使用过 Team Viewer，但是我愿意，如果这也有帮助，我也可以链接你的 repo

@VivekN 解决方案是什么？

【参考方案2】：

您可以使用 process.browser 来排除应用中的错误。

见底部示例：

function Example() 
  const initialState =
    process.browser && window.INITIAL_STATE;

  return <div>  initialState  </div>