嗨,我正在我的reactJS项目中尝试使用react-rte。我有服务器端渲染,每当我想使用此软件包时,都会得到:
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); ^ ReferenceError: window is not defined
我想问题可能出在同构工具上,但我不知道如何将导入包延迟到已经定义了窗口的客户端。
如果要进行服务器端渲染,则很有可能全局窗口对象将是未定义的,因为这只是客户端会理解的内容。
注意: 最初,当您启动项目时,它将渲染出DOM的完整字符串(此时,window由于它是服务器端,因此将不知道,但随后将其与客户端代码一起重新渲染窗口对象将可用!
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客户端将被渲染。
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设置为空对象,一旦客户端完成渲染,它将恢复正常。