Search code examples
reactjsreduxreact-starter-kit

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

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