frontend block is always empty

[Geraldf]

I tried to use it, but it looks like that the component in frontend.js (OurComponent) never gets rendered in this repo.
in the index.js the save function returns nothing
save: function () { return null }

which would explain why the block in the frontend is empty.

[Imonin]

Any solution to the block being empty?

[davulrich]

The function run before the element is rendered to the DOM.
You need to wait on window event "DOMContentLoaded."

Example:

import ReactDOM from 'react-dom'
import App from './app

window.addEventListener('DOMContentLoaded', () => {
  const rotateqDivElements = document.querySelectorAll('.rotateq-calc')
  rotateqDivElements.forEach((element) => {
    ReactDOM.render(<App />, element)
  })
})

@LearnWebCode Could you confirm it and change it in your code please?

[aczire]

@Geraldf @davulrich's observation is correct. You need to wait for the DOM to load all the elements.
I tried loading the script in the footer, by enabling in_footer parameter.
wp_enqueue_script('boilerplateFrontendScript', plugin_dir_url(__FILE__) . 'build/frontend.js', array('wp-element'), "0.0.1", true); which also worked.