Rails javascript_include_tag not loading react components

Question

Before today, I haven't had any issues loading react components in my rails app. But for some reason, today everything started returning a blank screen whenever I viewed a react page. Non-react pages work fine and display correctly.

I'm loading in the react page using a javascript_include_tag like so...

<div id='app' ></div>

<%= javascript_include_tag "pages/my-page" %>

The corresponding react component looks something like this...


export default function MyPage () {
  return (
    <div>Should display My Page</div>
  )
}

const loadMyPage = () => {
  const container = document.getElementById('app')
  if (container) {
    const root = createRoot(container)
    root.render(
      <MyPage/>)
  }
}

document.addEventListener('turbo:load', () => {
  loadMyPage()
})
document.addEventListener('turbo:render', function () {
  loadMyPage()
})

This issue only happens locally. In both my staging and production environments, pages are loading as expected.

Furthermore, if I view the page source I can see that the script tag is displaying the link to the right page:

<script src="http://localhost:3000/assets/pages/my-page-75f0a34104a6b2c9fb01510e93a17b23faad161ad68fd7e5ed616bc53610b413.js"></script>

For some reason, it just does not want to actually run the javascript? Any help is appreciated!

Rails javascript_include_tag not loading react components

0 Answers0