How do I use react boot strap with react-rails for server side rendering

Question

I have a rails app setup with react-rails and it is loading react pages to the server with server-side rendering. Now in order to speed up my development I need to add react-bootstrap to these components but I'm bit stuck have tried multiple options such as web packer and other libs but unfortunately most of these end up with client-side rendering

Here is my current code

home.js.jsx

const home = (props) => {
  return (
    <div>
      <h1>Hello from React Rails { props.firstName }</h1>
    </div>
  )
}

Controller

class HomeController < ApplicationController
  def show
    render component: "home", props: {firstName: "Test", LastName: "Last Name" }
  end
end

ERB Template

<%= react_component('home', props: { name: 'World' }) %>

I also tried getting some help from Chat GPT and it suggested the following

Install the necessary dependencies: react-bootstrap, bootstrap, and style-loader:

yarn add react-bootstrap bootstrap style-loader

In your application.js file, import the bootstrap and style-loader CSS files: javascript

import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import 'style-loader!css-loader!react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

and then using import React from 'react';

but in this case, I get the error **require is not a function**

Now I'm thinking is it even possible or not? Any help is appreciated

Thanks