React JS Server方面的问题-找不到窗口

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字符串，然后让客户端接管。

另请注意： 不必担心将window设置为空对象，一旦客户端完成渲染，它将恢复正常。