ruby-on-rails - 引用错误 : navigator is not defined using ReactJS on Ruby on Rails server side rendering

Question

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

@ckeditor5安装配置完成后，客户端编译完成。但是当我在 localhost:3000 上浏览网站时，服务器端呈现在每个页面上都失败并出现此错误:

ReferenceError: 未定义导航器

这是回溯:

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 编译以单个 block 退出

不知道怎么解决。

Answer 1

CKEditor 被设计为在浏览器上运行，因为它是一个 Javascript 库。如您所知，React on Rails 将 Rails 与(服务器呈现)React 前端框架集成在一起。因此，通过服务器端呈现，您的 React 组件首先在服务器上呈现为 HTML。

Webpack 捆绑模块，它首先提供给服务器，然后提供给浏览器。所以 ckeditor 库对于服务器来说是陌生的，因为它是一个 JS 库。因此，navigator is not defined 被抛出。但是 ckeditor 考虑到客户端呈现时工作正常，因为模块直接提供给浏览器。

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