React-devtools: Uncaught TypeError: Invalid value used as weak map key @backend.js 525

[terebentina]

This happens on chrome latest with devtools 0.14.1 when I interact with my app.
I did a console.log(element) on line 524 in backend.js and when this error appears, one of the elements there is null.

Uncaught TypeError: Invalid value used as weak map keygetId @ backend.js:525
(anonymous function) @ backend.js:569
onUpdated @ backend.js:568
(anonymous function) @ backend.js:1015
(anonymous function) @ VM55:42
emit @ VM55:41
performUpdateIfNecessary @ backend.js:2290
obj.(anonymous function) @ backend.js:2363
runBatchedUpdates @ ReactUpdates.js?ce09:151
Mixin.perform @ Transaction.js?6dff:134
Mixin.perform @ Transaction.js?6dff:134
assign.perform @ ReactUpdates.js?ce09:95
flushBatchedUpdates @ ReactUpdates.js?ce09:175
wrapper @ ReactPerf.js?ef93:70
Mixin.closeAll @ Transaction.js?6dff:207
Mixin.perform @ Transaction.js?6dff:148
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:66
batchedUpdates @ ReactUpdates.js?ce09:110
ReactEventListener.dispatchEvent @ ReactEventListener.js?2365:174

[jaredly]

What's your React version?

[terebentina]

0.13.3

[terebentina]

I just upgraded to react 0.14.0 and this still happens. React devtools 0.14.3.

[jaredly]

Strange. So this line is where that error would be happening, and it's caused by element not being an object -- it's probably undefined or null or something, and that's causing the error. I can't imagine _why_ it would be that way though.
Are you able to reliably reproduce this? Any chance you could spelunk in an tell us what the value of element is there, or come up with a repro example?

[terebentina]

Yes, reliably, every time in my app. See above in the issue description: I did a console.log(element) on line 524 in backend.js and when this error appears, one of the elements there is null..
I don't know if it's related or not but I do set some elements to null so that they're not displayed anymore in certain cases. Something like {foo ? <Elem /> : null}
I will try to come up with an example later today.

[markshust]

@terebentina did you find the root cause of this? i'm now experiencing this error when listening to componentWillReceiveProps.

[terebentina]

I haven't been able to reproduce with a small test case and I didn't have time to investigate further but it still happens on the production site though - you can see for yourself at https://www.estora.com. Sign up and click on the links in the header (you might need to create a bogus note/contact).
This is the current stack trace on my dev pc:

[markshust]

Really odd -- this was happening consistently for me as well, until I closed and reopened Chrome. The issue didn't happen again. I believe this is could be a bug with Chrome.

[terebentina]

I get an error on the production site in firefox too (developer edition 44.0a2).
There is a warning too captured in the screen below. The error in ff is slightly different though it seems to be the same thing:

[terebentina]

Btw, the error happens ONLY after clicking on the react tab in devtools (whatever browser). The error doesn't appear if you didn't do this. It will keep appearing no matter what tab you're on until you close devtools.

[tanneess]

I confirm the issue. I had it, but after restarting chrome it disappeared until I visited the chrome toolbar and refreshed my page, then it reappeared. I haven't been able to pin point the the exact cause yet. At least this thread has allowed me to avoid having this issue :)

[ffxsam]

This is still an issue.

[idmontie]

Can confirm this issue. It only happened when I opened React dev tools in Chrome. It stopped happening when I closed and reopened the tab.

[liesislukas]

Chrome Version 51.0.2704.79 (64-bit)
react 15.1.0

just had this issue, closing & re-open tab did not helped. It occurs again, but restarting helped.

i also have redux, react, firebase console extensions active

[Timothee]

Also just had this issue. Same thing as described in other comments: only happens after the React tab is activated; error happens on this line with element being null.

On the page with issues, I was using stuff like {foo ? <Elem /> : null} in a few places. I replaced them with {foo && <Elem/>} and that fixed the issue. I then realized that a single one of these instances was causing the issue. I've been trying to simplify the case to have something easily reproducible but haven't found anything yet (instead I've found weirder stuff…). I'll update if I find anything.

In the meantime, I suggest that people who have the issue do that. Or replace null with undefined maybe?

[tomitrescak]

@Timothee you are a life saver! I had a similar issue when using React hot loading and that seems to fix the issue. Thanks

[blackbing]

@Timothee, Oh my god, you save my life.

[ffxsam]

@Timothee Oh nice, I never thought of doing {someVar && <Elem />}. Older versions of React choked on rendering nulls, but it's been fixed. I'm guessing that still irritates React DevTools. :)

Another workaround, I believe, is to do {someVar ? <Elem /> : ''}.

[Timothee]

@ffxsam I actually came across {someVar && <Elem />} in the code base for react-devtools 😄 I had been using the null version before that.

[NeXTs]

I caught the condition when it occurs

<Table>
  <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
    <TableRow>
      <TableHeaderColumn>Device Name</TableHeaderColumn>
      <TableHeaderColumn>Description</TableHeaderColumn>
      <TableHeaderColumn>Model</TableHeaderColumn>
    </TableRow>
  </TableHeader>
  <TableBody displayRowCheckbox={false}>
    {devices.map(device => <Device
      key={device.id}
      device={device}
      handleEdit={this.handleEdit}
      handleDelete={this.handleDelete}/>
    )}
    {addDeviceFormRevealed && <AddDevice
      form='devices-new'
      handleCancel={this.handleCancel}
      handleApply={this.handleAddDevice}/>}
  </TableBody>
</Table>

It appears in addDeviceFormRevealed condition after adding one row to the list and setting addDeviceFormRevealed variable to false while adding new item to the devices list.
This table has such logic: on clicking 'Add new device' button - addDeviceFormRevealed becomes true and form appears. After setting all values and clicking Add - new device has been added to the devices array and addDeviceFormRevealed sets to false. So that during one "digest loop" one row has been added and one row has been removed from the same table, and somehow this occures aforementioned error.

I've tried both (true && <Elem>) and (true ? <Elem> : null) syntaxes but it doesn't help.

If take out addDeviceFormRevealed condition and place it after </Table> - error does not reproducible anymore
Appears to be that combination of array mapping + conditional element doesn't play well in same <Table>

as for Table, TableHeader, TableBody I've used [email protected] components

Device and AddDevice components are provided below, nothing special there, just to be sure that nesting markup suitable with material-ui's Table requirements

const Device = ({device, ...}) => (
  <TableRow selectable={false}>
    <TableRowColumn>
      <span>{device.name}</span>
    </TableRowColumn>
    ...
  </TableRow>
)
export default Device

const AddDevice = ({...}) => (
  <TableRow selectable={false}>
    <TableRowColumn>
      <Field name='name' label='Device Name' component={renderTextField}/>
    </TableRowColumn>
    ...
  </TableRow>
)
export default AddDevice

[vdh]

This is still happening with [email protected] and [email protected] on Chrome Version 52.0.2743.82 (64-bit)

[keyz]

Thanks for providing these clues! Would it be possible for someone to post a jsfiddle (or a clone/installable project) that reproduces the issue? I tried earlier but couldn't reproduce it on my end.

[Klathmon]

This example is about as small as i can make the issue happen:

const inDevelopment = true
const devOnlyLink = inDevelopment ? <div></div> : null

export default function () {
  return (
    <div>
      {devOnlyLink}
    </div>
  )
}

Replacing the devOnlyLink line with this solves it:

const devOnlyLink = inDevelopment && <div></div>

[everdimension]

@Klathmon It's strange, but this solved it.
Interesting is that I use ternary operators like that in many places in my app.
But on that particular page which caused the discussed error I had several ternary statements like that in a row. The error appeared only when I was leaving the page.

[gaearon]

@Klathmon

Can you please provide a _standalone_ example that reproduces the issue, _with instructions_ to reproduce it? I created a new project, copied your code into the root component. I have no idea how to reproduce it now. I see no errors from DevTools. If you provided instructions, it might have been fixed today, but alas. 😉

[Klathmon]

Yeah I can throw something together later today if i have time.

One thing i've noticed, it doesn't actually happen until after i've gone to the "react" tab of devtools, and then when a hot-update happens through webpack i get this error.

Don't take that as gospel though, that's just what i've noticed over the last week or so without really looking into it.

[gaearon]

That’s interesting. If it only happens with hot reloading that could explain it. But would love to see a full repro.

[Timothee]

I don't think it happens only when hot reloading. (which I haven't used even though I've seen the issue) In my case, IIRC, it was when the component was unmounted. (No idea if that would manifest itself with the simple test case)

[jaredly]

finally figured this out https://github.com/facebook/react-devtools/pull/414

[Timothee]

@jaredly @terebentina should this issue be closed now?

[gaearon]

Likely so.