React-joyride: TypeError: Cannot read property 'isSameNode' of undefined

[kAleksei]

🐛 Bug Report

When joyride initializes the error appears "TypeError: Cannot read property 'isSameNode' of undefined" The joyride tour with steps from global redux store where all the steps has targets as HTMLElements.
Stack Trace:

function getScrollParent(element, skipFix, forListener) {
  var parent = scrollParent(element);

  if (parent.isSameNode(scrollDoc())) {
    if (forListener) {
      return document;
    }

    return scrollDoc();
  }

Uncaught TypeError: Cannot read property 'isSameNode' of undefined
at getScrollParent (index.js:855)
at hasCustomScrollParent (index.js:884)
at getMergedStep (index.js:1288)
at Joyride.render (index.js:2810)
at finishClassComponent (react-dom.development.js:18470)
at updateClassComponent (react-dom.development.js:18423)
at beginWork$1 (react-dom.development.js:20186)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)
at performUnitOfWork (react-dom.development.js:24695)
at workLoopSync (react-dom.development.js:24671)
at performSyncWorkOnRoot (react-dom.development.js:24270)
at react-dom.development.js:12199
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12149)
at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
at flushSyncCallbackQueue (react-dom.development.js:12182)
at scheduleUpdateOnFiber (react-dom.development.js:23709)
at Object.enqueueSetState (react-dom.development.js:13994)
at Connect.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:325)
at Connect.onStateChange (connectAdvanced.js:205)
at Object.notify (Subscription.js:23)
at Subscription.notifyNestedSubs (Subscription.js:62)
at Connect.onStateChange (connectAdvanced.js:202)
at Object.notify (Subscription.js:23)
at Subscription.notifyNestedSubs (Subscription.js:62)
at Connect.onStateChange (connectAdvanced.js:202)
at Object.notify (Subscription.js:23)
at Subscription.notifyNestedSubs (Subscription.js:62)
at Connect.onStateChange (connectAdvanced.js:202)
at Object.notify (Subscription.js:23)
at Subscription.notifyNestedSubs (Subscription.js:62)
at Connect.onStateChange (connectAdvanced.js:202)
at Object.notify (Subscription.js:23)
at Subscription.notifyNestedSubs (Subscription.js:62)
at Connect.onStateChange (connectAdvanced.js:202)
at dispatch (redux.js:214)
at index.js:11
at dispatch (redux.js:611)
at WhatsNewTourActions.ts:25

To Reproduce

Just start the joyride tour

Expected behavior

It just might works without exceptions.

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/busy-cartwright-pmclf

Run npx envinfo --system --binaries --npmPackages react-floater

  System:
    OS: Windows 10 10.0.18362
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 15.93 GB / 31.94 GB
  Binaries:
    Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD

[gilbarbara]

Hey,

Always use the template to create new issues, it was designed to get all the required information about your setup and states that we need a demo to be able to debug your implementation.

So, we need a demo.

[kAleksei]

I reproduce demo in codesandbox.io.
I think the error is in dependencies version.
UPD. Okay, found problem. When I downgrade in sandbox @material-ui/core to"^3.9.3" the problem appears.

[gilbarbara]

So, you have your answer!
The problem is the @material-ui/core that apparently doesn't support refs.

The step's target must be a CSS selector string or an HTMLElement, but it is a React Element instead.

[erkanonal]

Uncaught TypeError: Cannot read property 'isSameNode' of undefined
at getScrollParent (index.js:855)
at getElementPosition (index.js:969)
at JoyrideOverlay.get (index.js:1818)
at index.js:1624

Same thing happens to me when my current target is not in the dom just for a second but step number is same. At my case, as I control the steps, sometimes at a step, my target needs to disappear before moving into the next step. This error is not fatal, yet still an error. As it is not fatal, can we handle the current target element's undefined case not to log an error over there?

[b-zurg]

I'm experiencing this error for elements that I can see in the DOM that have a valid CSS selector. It's very strange.