plus1tv
Cannot read property 'nodeType' of null
Hi there,
Trying to use React Anime in my project, and I keep getting the above error!
node v9.8.0
react v16.2.0
Snippet of my code:
render () {
const { type, show, title, fetching, handleCloseModal, initialValues } = this.props
let defaultValues = initialValues || {}
let animeProps = {
opacity: [0, 1],
translateY: [-64, 0],
delay: (el, i) => i * 200
}
return (
<Anime {...animeProps}>
{
show &&
<ActionModal
title={title}
show={show}
fetching={fetching}
onClose={handleCloseModal}>
{this._renderForm(type, defaultValues)}
</ActionModal>
}
</Anime>
)
}
Where show is a bool being passed from the parent component. I am also using styled-components throughout the app if that makes any difference?
The error seems to be in the actual anime.min.js file inside node_modules - not inside react-anime itself, but there is nothing there on the issue either. Anyone had this before and manage to solve it?
I am also having the same issues I do not have styled-components so it should not be related to that
I haven't managed to solve this yet unfortunately. Any feedback would be appreciated!
Also experiencing this issue, have a functional component that gets re-rendered by a parent class component according to some state changes, which also updates a call to apollo/graphql (not sure if this is potentially a pitfall). Without anime wrappers, the component works as expected, but with them I now get the "Cannot read property 'nodeType' of null" error. I suspect this falls somewhere on the component rendering in the lifecycle before Anime is ready, but not sure how to test this yet. I understood you guys had done some work on lifecycle methods for Anime mounting/unmounting, but haven't found it in the documentation. I am going to dig into the typescript files and see what I can find, but would appreciate any guidance if anyone has any. I realize the devs are busy with other projects, but just hoping anyone has any insight.
Have you guys tried not using the Anime component as the root element for the component render function.
try:
<div>
<Anime>
<component></component>
</Anime>
</div>
Did you try to give Anime component uniquekey value, which is id, index or something? @jeanverster
ex) If you pass down id to the component, it will be like this
render () {
const { type, show, title, fetching, handleCloseModal, initialValues } = this.props
let defaultValues = initialValues || {}
let animeProps = {
opacity: [0, 1],
translateY: [-64, 0],
delay: (el, i) => i * 200
}
return (
<Anime {...animeProps} key={this.props.id}> // this is supposed to be unique value
{
show &&
<ActionModal
title={title}
show={show}
fetching={fetching}
onClose={handleCloseModal}>
{this._renderForm(type, defaultValues)}
</ActionModal>
}
</Anime>
)
}
Also encountering this error with "react": "^16.2.0" and "redux": "^3.7.2"
I'm also facing the same issue with "react": "16.0" in jest snapshot testing.
The @manakuro advice do the trick for me, I'm using this library with Gatsby
Did you try to give
Animecomponent uniquekeyvalue, which is id, index or something? @jeanversterex) If you pass down
idto the component, it will be like thisrender () { const { type, show, title, fetching, handleCloseModal, initialValues } = this.props let defaultValues = initialValues || {} let animeProps = { opacity: [0, 1], translateY: [-64, 0], delay: (el, i) => i * 200 } return ( <Anime {...animeProps} key={this.props.id}> // this is supposed to be unique value { show && <ActionModal title={title} show={show} fetching={fetching} onClose={handleCloseModal}> {this._renderForm(type, defaultValues)} </ActionModal> } </Anime> ) }
It seems to be a unique key={11}, but it's not working https://codesandbox.io/s/o53rpz24kq
When key={11+Date.now()} is in use, it works.
Just adding on to this, it will happen even if your Anime element isn't at the top level of your component. In my case I had a div as the top level element and I had to make sure that the div element was the one that had a unique key.
Example:
<div key={id + Date.now()}>
<Anime />
</div>
Using Date.now() works, but it's a terrible solution. The component is re-rendered on every update, making the lifecycles begin and complete unuseable.
if you use Date.now() or combine anything with Date.now() at key={} attribute. every component will re-rendered on every update. it's shit. every trigger that you are doing is cause re-rendering component
The error means that the targets passed in is null. In my case, I was passing target using React ref.current which could be null across renders. Simply applying a null check on it solved it.
