在Ruby on Rails服务器端渲染中使用ReactJS时出现“ReferenceError: navigator未定义”错误。

Question

我正在使用ReactJS客户端和ReactJS on Rails应用程序上的webpack进行编译。我创建了一个React组件，按照建议导入了ckeditor库，如https://dev59.com/S1oV5IYBdhLWcg3wN8nh#41439980所示。

在安装和配置@ckeditor5之后，客户端被编译。但是，当我在localhost:3000上浏览网站时，每个页面的服务器端渲染都失败，并出现以下错误：

ReferenceError: navigator is not defined

以下是回溯：

Object../node_modules/@ckeditor/ckeditor5-utils/src/env.js ((execjs):121221:17)
__webpack_require__ ((execjs):55:30)
Object../node_modules/@ckeditor/ckeditor5-utils/src/keyboard.js ((execjs):121652:12)
__webpack_require__ ((execjs):55:30)
Object../node_modules/@ckeditor/ckeditor5-engine/src/view/uielement.js ((execjs):90071:17)
__webpack_require__ ((execjs):55:30)
Object../node_modules/@ckeditor/ckeditor5-engine/src/view/writer.js ((execjs):90991:18)
__webpack_require__ ((execjs):55:30)
Object../node_modules/@ckeditor/ckeditor5-engine/src/view/view.js ((execjs):90336:15)
__webpack_require__ ((execjs):55:30)

我的webpack编译只生成了一个代码块。

我不知道该如何解决这个问题。

- William Pollet

---

你在哪里运行这段代码？是这一行出了问题：https://github.com/ckeditor/ckeditor5-utils/blob/master/src/env.js#L12。这很奇怪。 - Reinmar

这是由Webpack创建的一个块，用于服务器端渲染。我猜这是因为服务器不知道navigator的缘故。但是从这里我不知道如何进一步。 - William Pollet

我们可以将该代码移动到一个函数中（这样模块评估后就不会执行）。但我们需要确信这确实发生了。您能否在 https://github.com/ckeditor/ckeditor5 上报告此最小示例？ - Reinmar

当然，我会尽可能提供详细信息来打开一个问题。 - William Pollet

Answer 1

CKEditor旨在作为Javascript库在浏览器上运行。正如您所知，React on Rails将Rails与React前端框架（服务器呈现）集成。因此，通过服务器端渲染，您的React组件首先在服务器上呈现为HTML。

Webpack捆绑模块并首先提供给服务器，然后再提供给浏览器。因此，ckeditor库对服务器来说是陌生的，因为它是JS库。因此，会抛出navigator is not defined的错误。 然而，考虑到客户端渲染，ckeditor可以正常工作，因为模块直接提供给浏览器。

由于使用情况较少，只有少数WYSIWYG编辑器可兼容在服务器上运行。据我所知，您可以使用codemirror-node作为替代方案，在Node上运行。

- Abhinav Kinagi