I am working on an app with the react_on_rails gem and using the React.js component React_Big_Calendar. Everything was working fine until I tried to use the Big Calendar component. I installed the component using npm. When the javascript_include_tag is in the HEAD of my layout.html.erb file I get the error: “Uncaught TypeError: Cannot read property ‘matches’ of null.” So after Googling around for a while I found a post that said to try moving the javascript_include_tag to the bottom of the body tag. When I tried that I got the error: “Uncaught Error: only one instance of babel-polyfill is allowed.” Being new to React on Rails I have two questions:
Where is the best place to include the javascript_include_tag (Head or body tag)?
How can I resolve these two errors?
We normally put the JS tags in the HEAD section.
Do you have any idea what would be throwing the “Uncaught TypeError: Cannot read property ‘matches’ of null.” when JavaScript included in the Head? Looks like the JS may be running before the Body tag is rendering to the page. Is there any way to make sure the page is loaded completely before the JS runs?
The file that is causing the error is ./~/dom-helpers/query/matches.js
The error is being thrown for most pages in my app.
After playing with some more I believe that one of the react components or a dependant is running before the page is completed loading. I though that the gem ran the code after the page loads. How can I make sure that the js runs after the page has completely rendered? I have use $(document).ready in other place but not sure were to do it here in react with this gem.
@Brian_Tatum You’re going to have to do some Yak Shaving.
If you get stuck, my team can help you if needed. Get in touch.