Search code examples
ruby-on-railsreact-railsexecjs

React::ServerRendering::PrerenderError in Search#show


I git this error React::ServerRendering::PrerenderError in Search#show from this scrip

<%= react_component('TagList', { tags: @tags }, { prerender: true }) %>

The errors are as below

Encountered error "#<ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined>" when prerendering TagList with {"tags":[{"id":40,"name":"food","created_at":"2021-09-04T20:55:32.358+07:00","updated_at":"2021-09-04T20:55:32.358+07:00","featured":false,"slug":"food","lowercase_name":"food"},{"id":46,"name":"good","created_at":"2021-10-14T22:12:19.645+07:00","updated_at":"2021-10-14T22:12:19.645+07:00","featured":false,"slug":"good","lowercase_name":"good"}]}
eval (eval at <anonymous> ((execjs):37:8), <anonymous>:6:45)
eval (eval at <anonymous> ((execjs):37:8), <anonymous>:18:13)
(execjs):37:8
(execjs):55:14
(execjs):1:40
Object.<anonymous> ((execjs):1:58)
Module._compile (internal/modules/cjs/loader.js:1085:14)
Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
Module.load (internal/modules/cjs/loader.js:950:32)
Function.Module._load (internal/modules/cjs/loader.js:790:12)

This is app/javascript/components/TagList.js

import React from 'react';
import ReactDOM from "react-dom";
import PropTypes from 'prop-types';

export default class TagList extends React.Component {
  render () {
    return (
      <div className={`tags-wrapper ${this.props.className}`} >
        {this.renderTags()}
      </div>
    );
  }

  renderTags() {
    return this.props.tags.map(tag => {
      return (
        <a
          key={tag.id}
          className="tag"
          href={`/tags/${tag.slug}`}>
          {tag.name}
        </a>
      );
    });
  }
}

This is app/javascript/server_rendering.js

const componentRequireContext = require.context("components", true);
const ReactRailsUJS = require("react_ujs");

window.componentRequireContext = componentRequireContext
ReactRailsUJS.useContext(componentRequireContext);

The resources are as below
execjs 2.8.1
react-rails 2.6.1
ruby 3.0.2
rails 7.0.0.alpha2

Can anyone advise how to fix this?


Solution

  • Now I can fix the issue by update from
    <%= react_component('TagList', { tags: @tags }, { prerender: true }) %>
    to
    <%= react_component('TagList', { tags: @tags }, { prerender: false }) %>