Error: Unable to find element with ID 275

Question

I am getting this error when i reload the dynamic page.

Error: Unable to find element with ID 275. at invariant (invariant.js:38) at precacheChildNodes (ReactDOMComponentTree.js:96) at Object.getNodeFromInstance (ReactDOMComponentTree.js:172) at Object.didPutListener (SimpleEventPlugin.js:210) at Object.putListener (EventPluginHub.js:143) at Object.putListener (ReactDOMComponent.js:176) at CallbackQueue.notifyAll (CallbackQueue.js:76) at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) at ReactReconcileTransaction.closeAll (Transaction.js:206) at ReactReconcileTransaction.perform (Transaction.js:153)

and

Uncaught (in promise) TypeError: Cannot read property 'remove' of undefined at Object.willDeleteListener (SimpleEventPlugin.js:220) at Object.deleteAllListeners (EventPluginHub.js:201) at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:976) at Object.unmountComponent (ReactReconciler.js:79) at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:418) at Object.unmountComponent (ReactReconciler.js:79) at Object.unmountChildren (ReactChildReconciler.js:146) at ReactDOMComponent.unmountChildren (ReactMultiChild.js:373) at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:974) at Object.unmountComponent (ReactReconciler.js:79)

In this dynamic page i have got a raw html in which i replace the part with @gallery{Id}@ with component react-image-gallery. I cannot the problem because in dynamic path where i have got 2 galleries it is working well and with server side navigation and with reloading the page. But in specific dynamic path which using same dynamic component i get this error only on reload, that means if copy the link and paste it to access instantly this page i get this error. By using inspect i see

<div data-reactid="274">  // this is item in children
     <p>............</p>
    <div data-reactid="275"></div>//but this is another item in children that for unknow reason nested in data-reactid="274"
</div>

but i should see

<div data-reactid="274"> 
     <p>............</p>
</div>
<div data-reactid="275"></div>

I think this happen because of more galleries to add (more data). The thing is that when i get the array of object to render are the same when i navigating there with server side navigation and when i reload the page. I am getting the array by doing this.

children = parts.map((item, index) => {
        if (typeof item === "string") {
          return <div key={index} dangerouslySetInnerHTML={{ __html: item }} />
        } else {
          return <div key={index}>{item}</div>;
        }
      })

score 10 · Accepted Answer · answered Apr 03 '17 at 17:47

10

This is due to invalid HTML structure that you are setting via dangerouslySetInnerHTML. Most likely because there is tag that is not closed.

answered Apr 03 '17 at 17:47

Tomas Kirda

8,347
3
31
23

Any suggestion how filter it to check if there is un-closed tag close it or something similar? – Efthimis P Apr 03 '17 at 20:24
You may want to use HTML parser to ensure validity. It is best to ensure html is valid when saving it. You may also try https://www.npmjs.com/package/html-to-react – Tomas Kirda Apr 03 '17 at 21:50
You can also use add sanitize-html-react (https://www.npmjs.com/package/sanitize-html-react) to sanitize the raw HTML. It helps to correct broken or missing HTML tags. – Skaranjit Oct 16 '17 at 07:47

random-forest-cat · Answer 2 · 2017-10-20T16:56:00.117

I will share my own experience with this problem to help others:

For me, the issue occurred because i was rendering children through react AND a 3rd party lib

<Mapbox>{mapLoaded ? children : null}</Mapbox>

The map code loads client side only and needs a container div reference so it can inject its <canvas> element after the page has loaded.

By moving the children outside of div reserved for the canvas, react was able to render its own children without being interrupted by nodes injected via 3rd party

<div>
  <Mapbox /> {/* <- this element reserverd for canvas / element injection not handled by react */}
  {mapLoaded ? children : null}
</div>

If you use a 3rd party lib that performs dom injections it is safer to always render react children outside of it.

score 0 · Answer 3 · answered Aug 15 '17 at 14:28

0

If you are using cloudflare make sure HTML minification is disabled since it removes HTML comments that react uses to find elements.

answered Aug 15 '17 at 14:28

Iman Mohamadi

6,552
3
34
33

score 0 · Answer 4 · answered Mar 31 '18 at 03:45

I just burned an hour debugging this issue. In the end, I had data-reactid attribute on my jsx left over from copying some code out of Chrome Dev tools. I thought I deleted them all, but apparently not. Interestingly, the id number being reported was not the same id hardcoded in the jsx.

score 0 · Answer 5 · answered Apr 21 '20 at 05:24

react 15.6 with SSR, met this problem with unstructured HTML

<div>
 {isValid
  ?<div>
     {value1}
   </div>
  :{value2}
 }                 
</div>

after warping value2 with <div>:

<div>
 {isValid
  ?<div>
     {value1}
   </div>
  :<div>
    {value2}
   </div>
 }                 
</div>

Errors gone

Error: Unable to find element with ID 275

5 Answers5