CODEWITHSUNDEEP
reactjsreduxreact-starter-kit
Efthimis P
Efthimis P

Reputation: 139

Error: Unable to find element with ID 275

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

Upvotes: 3

Views: 4585

Answers (5)

Kaiwen Luo
Kaiwen Luo

Reputation: 513

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

Upvotes: 0

Blaine Garrett
Blaine Garrett

Reputation: 1366

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.

Upvotes: 0

random-forest-cat
random-forest-cat

Reputation: 35914

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.

Upvotes: 1

Iman Mohamadi
Iman Mohamadi

Reputation: 6829

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

Upvotes: 0

Tomas Kirda
Tomas Kirda

Reputation: 8413

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

Upvotes: 10

Related Questions