React rails gem server side rendering issue

Question

I'd like to design email templates in react and render them in my rails application. I have installed react-rails gem and did the preliminary installation steps. i.e rails g react:install. I intend to use server-side rendering in a sidekiq-worker to send emails. My config files are as follows:

app/assests/javascripts/application.js

//= require react_ujs
//= require components
//= require_tree .

app/assests/javascripts/components.js

//= require_tree ./components

app/assests/javascripts/server_rendering.js

//= require react-server
//= require react_ujs
//= require ./components
//
// By default, this file is loaded for server-side rendering.
// It should require your components and any dependencies.

config/initializers/react_server_rendering.rb

# frozen_string_literal: true

# To render React components in production, precompile the server rendering manifest:
Rails.application.config.assets.precompile += ["server_rendering.js"]

app/views/email_templates/send_welcome_email.html.erb

<%= react_component('WelcomeEmail', { recipient: recipient, subject: subject }, {prerender: true}) %>

app/javascript/components/WelcomeEmail.jsx


function WelcomeEmail(props) {
  return (
    <div>
      <h1>Welcome to Our Website</h1>
      <p>Thank you for joining us. We're excited to have you on board.</p>
    </div>
  );
}

export default WelcomeEmail;

I am currently first testing my code on the rails console with this:

 html_content = ApplicationController.render(
    template: 'email_templates/send_welcome_email',
    locals: { recipient: 'test@gmail.com', subject: 'Email' }
)

Without prerender I get this:

"<!DOCTYPE html>\n<html>\n  <head>\n    <title>Inflowkit</title>\n    <meta name=\"csrf-param\" content=\"authenticity_token\" />\n<meta name=\"csrf-token\" content=\"xHEgcyuCHef276SxRiQyeBN+RrEWC4eXayEy8SESNZ2AwakabPdp1nvM/HPfEaiCsXHDFKgJZpqbQ+x8LfBieA==\" />\n    \n  </head>\n    <body class='main page'>\n<div data-react-class=\"WelcomeEmail\" data-react-props=\"{&quot;recipient&quot;:&quot;test@gmail.com&quot;,&quot;subject&quot;:&quot;subject&quot;}\" data-react-cache-id=\"WelcomeEmail-0\"></div>\n  </body>\n</html>\n"

With prerender set to true I get the error:

Traceback (most recent call last):
        5: from (irb):22
        4: from app/views/email_templates/send_welcome_email.html.erb:1
        3: from (execjs):1:40
        2: from (execjs):777:14
        1: from (execjs):579:13
ActionView::Template::Error (TypeError: require is not a function)

if I add //= require react to server_rendering.js file i get:

Traceback (most recent call last):
        5: from (irb):27
        4: from app/views/email_templates/send_welcome_email.html.erb:1
        3: from (execjs):1:40
        2: from (execjs):785:14
        1: from (execjs):37:13
ActionView::Template::Error (TypeError: Cannot read properties of undefined (reading 'env'))

Could someone please help me get the set up correct?

React rails gem server side rendering issue

0 Answers0