React-dates: Cannot call method 'querySelector' of null

[jherencia]

We are using react-dates in a website and have installed RavenJS to track the errors, it appears this error quite often:

[ljharb]

In what browser do you see that?

[jherencia]

I attach the browser, SO and device family statistics:

os.csv.txt
device.family.csv.txt
browser.csv.txt

[ljharb]

Hmm, I'm not sure why findDOMNode would return null in those browsers.

[johnryan]

@jherencia did you find a solution to this? i'm seeing the same issue.

My stack trace is actually slightly different:

Uncaught TypeError: Cannot read property 'querySelector' of null
    at DayPicker.initializeDayPickerWidth (DayPicker.js:770)
    at DayPicker.componentDidMount (DayPicker.js:406)
    at CallbackQueue.notifyAll (CallbackQueue.js:65)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:81)
    at ReactReconcileTransaction.closeAll (Transaction.js:202)
    at ReactReconcileTransaction.perform (Transaction.js:149)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:136)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:86)
    at Object.flushBatchedUpdates (ReactUpdates.js:147)
    at Object.wrapper [as flushBatchedUpdates] (ReactPerf.js:66)

[majapw]

So we can add a check for null in these locations, but it seems weird to me that it's not set in componentDidMount or that React.findDOMNode doesn't return anything.

[johnryan]

@majapw so not sure if this helps but what i'm seeing that's a bit weird is that when using create-react-app it works fine in development. The issue only shows up when it's compiled for production.

[ljharb]

Is this.calendarMonthGrid a ref that's being set in, perhaps, an inline arrow callback?

Refs can sometimes be null unless you use a constructor-bound instance method (such that the ref callback's reference is === every time). We'll either need to check for null, and/or, not use an inline function.

[majapw]

Hullo! I made a PR. Please checkout out #552

[johnryan]

@majapw Thanks for the PR! is there any recommended way to test this to make sure it fixes the issue? I tried installing with "react-dates": "[email protected]:airbnb/react-dates.git#maja-add-null-check-for-calendarmonthgrid" but it seems that the npm version is different than what's on github for some reason.

[ljharb]

Anything that's got a build process won't really work when installed from github.

[johnryan]

@ljharb Yea that's what I was afraid of, was just hoping to verify there wasn't some other similar null ref issue that will be revealed by this fix.

[majapw]

Yeah unfortunately, we'll have to do a release first I think. I'll get on that ASAP.

[majapw]

Check out v12.1.2! This is hopefully addressed there.

[johnryan]

@majapw that seems to have resolved the error, but the component still has problems visually when switching months (maybe related to not being able to find the ref?). Should I open a new issue / is there anything I can do to provide more info?

[majapw]

Can you open an issue and share your config?

[johnryan]

@majapw opened #553 thanks for all the help