反应JS服务器端问题 - 找不到窗口

Question

嗨,我正在尝试在reactJS项目中使用react-rte.我有服务器端渲染,每次我想使用这个包我得到:

return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
                               ^
ReferenceError: window is not defined

我想问题可能是同构工具,但我不知道如何将包导入到已经定义窗口的客户端.

Answer 1

如果您正在进行服务器端渲染,那么全局窗口对象很可能是未定义的,因为这只是客户端会理解的内容.

注意:最初,当你启动你的项目时,它会渲染出一个完整的DOM字符串(此时它不会知道,window因为它是服务器端,但随后使用你的客户端代码重新渲染窗口对象将可用!

我在这种情况下使用了一种解决方法.这就是我的webpack插件所拥有的:

new webpack.DefinePlugin({
  'process.env.NODE_ENV': isDevelopment ? '"development"' : '"production"',
  'process.env.BROWSER': JSON.stringify(true),
  __DEV__: isDevelopment
}),

所以我使用process.env.BROWSER了我的优势,因为它将被定义为undefined它是服务器端,并且true如果客户端完成渲染将是.

因为当服务器端没有窗口对象时,一切都停止工作,我们可以添加:

const mySpecialWindowFunction = () => {

  /* START HACK */
  if (!process.env.BROWSER) {
    global.window = {}; // Temporarily define window for server-side
  }
  /* END HACK */

  return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
};

这样,您的控制台就不会对您尖叫,也不会停止服务器端渲染,您现在可以继续光荣的一天!虽然我不得不承认这有点像Hacky,但它完成了工作,因为我们想要做的就是让服务器端渲染出初始的DOM字符串,然后让客户端接管.

另请注意:不要担心将窗口设置为空对象,一旦客户端完成渲染,它将恢复正常.

Answer 2

这是一个npm库,可以为您处理窗口,文档和全局对象:全局.

然后你可以安全地写:

import window from 'global'

const mySpecialWindowFunction = () => {
    return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
};

Answer 3

对于任何试图弄清楚为什么他们的 SSR 失败的人，即使他们正在检查 window 对象是否未定义。

您需要检查窗口引用是否存在，而不是它的值是否为空！

  if (typeof window === 'undefined') console.log('Window is not there')

您的window && 和 if (window)检查失败，因为在 JavaScript 中未声明和“未定义”是不同的东西。

const a = undefined;
if (a) console.log('a');  // logs nothing, since 'a' is undefined
if (b) console.log('b');  // ReferenceError: b is not defined

原始问题的答案是，无论何时访问需要“窗口”的对象，您都需要将它们设置为有条件的：

return (typeof window === 'undefined') ?
   'node' :
   /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());