Cannot read property 'nodeType' of null

[jeanverster]

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?

[klabelkholosh]

I'm sitting with the same issue.. did you manage to fix it?

[NicolaSansom]

I am also having the same issues I do not have styled-components so it should not be related to that

[jeanverster]

I haven't managed to solve this yet unfortunately. Any feedback would be appreciated!

[bhersey]

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.

[ApeNox]

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>

[manakuro]

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>
    )
  }

[quinnliu]

Also encountering this error with "react": "^16.2.0" and "redux": "^3.7.2"

[hardikmodha]

I'm also facing the same issue with "react": "16.0" in jest snapshot testing.

[TotallWAR]

The same one

[TotallWAR]

@manakuro thx, it helped to me strangly

[JoxieMedina]

The @manakuro advice do the trick for me, I'm using this library with Gatsby

[vladknp]

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>
    )
  }

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.

[cizz3007]

this is the answer

[susannepeng]

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>

[hlolli]

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.