Eslint-plugin-react: New error with v7.12.4: TypeError: Cannot read property 'type' of null

[Android3000]

I'm seeing a new linting error failing a previously working module build via Webpack after the latest update to this plugin. The error I'm seeing is:

Module build failed: TypeError: Cannot read property 'type' of null
    at Object.getRelatedComponent"

A change was added where a new check to refId.parent.init.type !== 'Identifier' is being made, but it appears refId.parent.init must be null in some cases, and there isn't null check protection in place.

The commit in question is here:
https://github.com/yannickcr/eslint-plugin-react/commit/5fc50aa9238768674cf2a2ca1d9676be629a920a#diff-bafb3355a409c4ba076a9e3d609ad65b

I can try to cobble together some files to try and reproduce this in some code if needed... I'll just have to put together a specific example to illustrate as I can't provide the existing code.

[Android3000]

Okay, this is weird. The code failing in question is very simple. Here is a contrived example:

let items = [];
let testData = [{a: "test1", displayName: "test2"}, {a: "test1", displayName: "test2"}];
for (let item of testData) {
    items.push({a: item.a, b: item.displayName});
}
return items;

It's failing simply because of the property displayName. If I change that to any other name, e.g. displayName2 or b, the TypeError goes away.

I wonder if this could actually be some unexpected transpiling issue that is then leading to refId.parent.init being null when it's not expected.

[ljharb]

Thanks; the repro code helps a lot. Any idea what file it’s crashing on?

[Android3000]

The file in question where the error is originating from is lib/util/Components.js -- the commit link in the first post shows the changed line that is causing the exception. refId.parent.init.type !== 'Identifier' is blowing up, as refId.parent.init is null in my case. A null check might help here -- e.g. ... && refId.parent.init && refId.parent.init.type -- but it seems odd that this is happening in the first place.

It's definitely strange that the property name of displayName appears to be what eventually leads to refId.parent.init being null. I know that displayName is used in things like React components sometimes, or the non-standard function.displayName -- but this is just an arbitrary Object, so it's odd that it would cause this. I do wonder if this is some transpilation issue further upstream that is eventually causing this, but I don't know enough about the internal code for eslint-plugin-react to know what init represents exactly.

On another note, I switched from for (let item of testData) to testData.forEach(item => and that also seems to work.

Sorry if I'm misunderstanding what you are asking!

[ljharb]

Sorry, I meant what rule, not what file :-)

To reiterate, this code crashes:

let items = [];
let testData = [{a: "test1", displayName: "test2"}, {a: "test1", displayName: "test2"}];
for (let item of testData) {
    items.push({a: item.a, b: item.displayName});
}
return items;

and this code does not:

let items = [];
let testData = [{a: "test1", displayName: "test2"}, {a: "test1", displayName: "test2"}];
testData.forEach(item => {
    items.push({a: item.a, b: item.displayName});
});
return items;

[Android3000]

Correct. This code also does not crash:

let items = [];
let testData = [{a: "test1", anythingelse: "test2"}, {a: "test1", anythingelse: "test2"}];
for (let item of testData) {
     items.push({a: item.a, b: item.anythingelse});
}
return items;

It looks like this is coming from the rule (this makes so much more sense now): "react/display-name"

[Android3000]

Thanks for putting in a fix for this!

[jwalton]

Can we please publish this fix? This is breaking for me, too.