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?
Now I can fix the issue by update from
<%= react_component('TagList', { tags: @tags }, { prerender: true }) %>
to
<%= react_component('TagList', { tags: @tags }, { prerender: false }) %>