React-big-calendar: Uncaught TypeError: Cannot read property 'matches' of null

[BrianTatum]

I am trying to use this component in a Rails project using the React On Rails gem. I believe the competent is causing the above error as everything was working before I included it. Any help would be greatly appreciated.

[tobiasandersen]

Can you show how you use it? It's really hard suggesting anything with this info alone.

[jquense]

do you have the rest of the stack trace? I don't think this is due to RBC, it seems like there is a regex match attempt somewhere on something that isn't a string

[BrianTatum]

Below is a copy of my component code as a text file. I had the component working by including it at the bottom of the HTML file, but then I found that it was throwing an error with bable-pollyfill (more that one). When it is included in the HEAD I get the above error.

comp.txt

Full copy of error from my console:
Uncaught TypeError: Cannot read property 'matches' of null
at eval (eval at (webpack-bundle.js:5798), :21:27)
at eval (eval at (webpack-bundle.js:5798), :26:5)
at Object. (webpack-bundle.js:5798)
at __webpack_require__ (webpack-bundle.js:21)
at eval (eval at (webpack-bundle.js:5792), :8:16)
at Object. (webpack-bundle.js:5792)
at __webpack_require__ (webpack-bundle.js:21)
at eval (eval at (webpack-bundle.js:5786), :15:16)
at Object. (webpack-bundle.js:5786)
at __webpack_require__ (webpack-bundle.js:21)

[jquense]

this component doesn't use babel-polyfill so that error isn't likely to be related here.

Sorry your stack trace isn't helpful, I'd really consider enabling source maps on your app, so you can see where the error actually happens in the source files instead of a giant compiled bundle.

[BrianTatum]

I have traced the error to: ./~/dom-helpers/query/matches.js. Is this a dependancy of RBC. Looks like the JS is running before the DOM is loading.

[jquense]

that's on you then :P you shouldn't be loading these in the head, and if you insist on that not without an onReady check

[BrianTatum]

I am trying to use this in a Ruby on Rails app using the React_On_Rails gem. I thought the gem was going to transpile all the React.js code, add it into the Rails assets pipeline and then run is after the DOM loads, but something it is allowing that dom-helper to run before everything is ready. I am moving my issue over to React_On_Rails.

BTW: I have gotten a mock up done with this component. It is a great calendar, looks great on the page, and has some wonderful features.

Thanks for your help!! @jquense

[shadysayed]

I've faced the same thing. It is not related to react-big-calendar. you need to move your javascript_include_tag into the body (remove it from the head and put it in the body)

[BrianTatum]

I have tried that as well and then I get babel-polyfill error (more than one loading). I have talked to the creator of React-on-Rails gem and they say to leave it in the head. I do not think anything is wrong with RBC.. It is the integration of react.js into a rails app using this gem. Still have not worked it out at this point, but that is were I am working at this point. Had to take a break from it for a while and work on other areas of my app for now. I will re-post back here if I get it working. Would appreciate any help and input anyone can offer.

[RKushnir]

@BrianTatum I made a PR to address this issue in the dom-helpers.
To keep JS tag in the document head is a default in Rails. I don't think it's ok for a library to force you to move it.

[spherop]

I had a similar issue attempting to use this component with react-webpack-rails. Cannot read property 'matches' of null errors when deploying to Heroku - but not locally.

[Sihui]

Suggestion from @shadysayed works for me!
Thanks!

you need to move your javascript_include_tag into the body (remove it from the head and put it in the body)