“文档未定义”Webpack + React on Rails + 服务器渲染答案

【问题标题】："Document is not defined" Webpack + React on Rails + Server Rendering“文档未定义”Webpack + React on Rails + 服务器渲染
【发布时间】：2016-06-25 01:13:29
【问题描述】：

我使用 react_on_rails gem 并尝试通过服务器渲染组件。

当我直接从应用程序中使用组件时，它可以正常工作！

import Hello from "../components/Hello"

ReactOnRails.register({
  Hello
})

但是当我尝试使用包时，应用程序会抛出错误。

import { Ballon } from "foo-package"
import Hello from "../components/Hello"

ReactOnRails.register({
  Ballon,
  Hello
})

ERROR in SERVER PRERENDERING
Encountered error: "ReferenceError: document is not defined"

有人知道为什么吗？

【问题讨论】：

它不起作用的原因是您导入的包对服务器渲染不友好。在服务器端，node.js 不是全局变量。你可以尝试在你的Hello Component的render或componentWillMount中使用document，同样的错误会发生。

标签： ruby-on-rails reactjs webpack

【解决方案1】：

window 和 document 是仅在浏览器环境中可用的全局变量。

当您在服务器上进行渲染时，您没有该环境。当您在 node.js 环境中时，您需要保护您的代码并跳过对这些对象调用任何函数。例如：

if (typeof document !== 'undefined') {
  // Do your document thing here
} else {
  console.log("We're on server")
}

【讨论】：

【解决方案2】：

我找到了！ 'foo-package' 使用非同构包。它破坏了服务器渲染。包是 react-google-chart。

【讨论】：