Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal Error: Cannot read property 'parentNode' of undefined

See original GitHub issue

Issue description

components: Modal
reactstrap version #4.8.0
import method es
react version #16.0.0
bootstrap version #4.0.0-beta.2

What is happening?

I encountered the ‘Uncaught TypeError: Cannot read property ‘parentNode’ of undefined’ error when trying the Modal examples. What should I do to solve this problem? Thank you in advance.

Error message in console

Uncaught TypeError: Cannot read property ‘parentNode’ of undefined at Modal.renderIntoSubtree (webpack-internal:///./node_modules/reactstrap/dist/reactstrap.es.js:2518) at Modal.show (webpack-internal:///./node_modules/reactstrap/dist/reactstrap.es.js:2484) at Modal.togglePortal (webpack-internal:///./node_modules/reactstrap/dist/reactstrap.es.js:2438) at Modal.componentDidUpdate (webpack-internal:///./node_modules/reactstrap/dist/reactstrap.es.js:2378) at commitLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11517) at commitAllLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12294) at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:1299) at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:1338) at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:1195) at commitAllWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12415)

Code

The code I was running is: https://reactstrap.github.io/components/modals/

Issue Analytics

State:
Created 6 years ago
Reactions:4
Comments:6 (2 by maintainers)

Top GitHub Comments

11reactions

a-tokyocommented, Oct 26, 2017

@Heizyuan upgrade your reactstrap version to: ^5.0.0-alpha.3 it worked for me. I used yarn add reactstrap@next

Although I also had to upgrade these since I used them:

 "react-addons-css-transition-group": "^16.0.0-alpha.3",
 "react-addons-transition-group": "^16.0.0-alpha.3",

6reactions

TheSharpieOnecommented, Oct 26, 2017

Yes, this is an issue with portals in react 16. They do not return the reference needed for focus. You can disable the autoFocus by passing autoFocus={false} to the Modal, but it is best to just upgrade to 5.0.0-alpha.3 as A-Tokyo mentioned.

The upgrade is also recommended since you are using bootstrap 4.0.0-beta.2, the 4.8.0 version you are on only supports 4.0.0-alpha.6. Plus, 4.8.0’s react peerDep does not allow react 16, so you are probably getting warning.

Top Results From Across the Web

Bootstrap 5 offcanvas error: Uncaught TypeError: Cannot ...

Currently, I receive the "parentNode" error when I click on any . Any ideas why I get this error? The <tr> has a...

Sidenav has error : Cannot read property &#039

Hi,. You have added option data-mdb-scroll-container="#scrollContainer" which points to the #scrollContainer element that is not present in your HTML.

Cannot read property 'parentNode' of null

Hello, The project that i'm working on uses Telerik version 2013.3.1324.40 and recently the following error happened in our client (see ...

"Cannot read property parentNode" error

Given the mention of parentNode in the error message, my only guess would be that it is somehow related to the use of...

JavaScript runtime error: Unable to get property 'parentNode ...

Recently while working with Ajax ModalPopupExtender control, I got the below error: "JavaScript runtime error: Unable to get property ...