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

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

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

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

解决方法:

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

Note: Initially, when you start up your project its going to render out a complete string of your DOM (at this point it will not know about window because it is server side, but then re-render with the client-side code to which your window object will be available!

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

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

所以我使用process.env.BROWSER对我有利,因为如果它是服务器端,它将被定义为undefined,如果客户端完成渲染,它将是真的.

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

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

Also Note: Don’t worry about setting window as an empty object, it will be back to normal once the client-side finishes rendering.

标签：javascript,reactjs,webpack,serverside-rendering,draftjs
来源： https://codeday.me/bug/20191001/1839092.html