ReferenceError：在Ruby on Rails服务器端渲染中未使用ReactJS定义导航器

Question

我正在使用Rails上的ReactJS在webpack上的Rails应用程序上编译我的ReactJS客户端。我创建了一个React组件，该组件按照https://stackoverflow.com/a/41439980/5764661

中的建议导入ckeditor库

在安装和配置@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编译会在单个块中退出

我不知道该怎么解决。

Answer 1

CKEditor被设计为在浏览器上运行，因为它是Javascript库。如您所知，React on Rails将Rails与React前端框架（服务器渲染）集成在一起。因此，通过服务器端渲染，您的react组件首先被渲染到服务器上的HTML中。

Webpack 将模块捆绑在一起，并将其首先提供给服务器，然后再提供给浏览器。因此ckeditor库与服务器无关，因为它是JS库。因此，将抛出navigator is not defined。 但是，考虑到客户端渲染，ckeditor可以很好地工作，因为模块直接提供给浏览器。

由于用例最少，因此有一些兼容的所见即所得编辑器可以在服务器上运行。据我所知，您可以选择codemirror-node作为替代方案，它将在Node上运行。