小编典典

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

reactjs

嗨,我正在我的reactJS项目中尝试使用react-rte。我有服务器端渲染,每当我想使用此软件包时,都会得到:

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

我想问题可能出在同构工具上,但我不知道如何将导入包延迟到已经定义了窗口的客户端。


阅读 320

收藏
2020-07-22

共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设置为空对象,一旦客户端完成渲染,它将恢复正常。

2020-07-22