TypeError Cannot read property 'length' of null in velocity-component.js (v1.4.1)

[FUJI Goro]

I use this module via https://github.com/storybooks/react-treebeard and saw an error:

TypeError Cannot read property 'length' of null in velocity-component.js

It seems here (line 158):

velocity-react/src/velocity-component.js

Lines 157 to 159 in b65e87f

 _clearVelocityCache(target) { 
   if (target.length) { 
     _.forEach(target, this._clearVelocityCache); 

From our sentry:

For now I'll disable animations on react-treebeard to avoid this issue; I've reported it for those who saw the same errors, anyway.

[nomar22]

I'm on the same situation, actually disable animations doesn't work for me. Any idea?

[Fiona Hopkins]

Hrm. Looks like _clearVelocityCache in VelocityComponent could be updated to have an existence check.

This can come up if the child of your VelocityComponent renders to null it seems.

[nomar22]

I think my problem is related in fact I'm using this react-tree-beard with react-router , in some way this clearVelocityCache doesn't find the component when redirecting router. To solve this I just unmount this component before execute redirect in my react router.

[Richard Nabaasa]

@nomar22 this might be a late answer, but just make sure the child of VelocityComponent doesn't return null all should be good, like @fionawhim pointed out, took me a while to figure it out too.

[Justin B]

I see this issue has been opened for quite a long time. I'm having a similar issue with the same _clearVelocityCache function when using a native html select input (rendered by Material-UI's Select component using the native prop). Interestingly, if I remove all <option> elements under the select, it works without issue. It's trying to run this against all children/decendants and erroring out when it gets to the options.

 _clearVelocityCache(target) { 
   if (target.length) { 
     _.forEach(target, this._clearVelocityCache);

If do something like the below, checking for this, it also works fine.

 _clearVelocityCache(target) { 
   if (target.length) { 
     _.forEach(target, this ? this._clearVelocityCache : console.log('no this here!'));

I'm going to create a PR for this unless someone has a fix for this in the current version (1.4.3)? I could also include the parent this check to resolve the original Cannot read property 'length' of null from the topic of this issue.