Next.js: Invariant Violation: Unable to find element with ID XX

Created on 10 Feb 2017 · 22Comments · Source: vercel/next.js

When trying to run next.js on an AWS EC2, the following error was observed

Invariant Violation: Unable to find element with ID 109.
    at invariant (https://server.com/_next/-/commons.js:127:319)
    at precacheChildNodes (https://server.com/_next/-/commons.js:153:42)
    at getNodeFromInstance (https://server.com/_next/-/commons.js:162:41)
    at ReactDOMComponent.trapBubbledEventsLocal (https://server.com/_next/-/commons.js:10891:14)
    at CallbackQueue.notifyAll (https://server.com/_next/-/commons.js:1094:22)
    at ReactReconcileTransaction.close (https://server.com/_next/-/commons.js:14780:26)
    at ReactReconcileTransaction.closeAll (https://server.com/_next/-/commons.js:357:888)
    at ReactReconcileTransaction.perform (https://server.com/_next/-/commons.js:356:621)
    at batchedMountComponentIntoNode (https://server.com/_next/-/commons.js:2006:15)
    at ReactDefaultBatchingStrategyTransaction.perform (https://server.com/_next/-/commons.js:35

More Info

This does not occur when running a local server
Always happens when a page is requested directly and never through AJAX
Can be solved by rendering some components after mount

Eg. next/Head

      {
        this.state.mounted &&
        <Head>
          <title>{this.props.title} | Website</title>
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        </Head>
      }

Steps to reproduce:

Just create a page with next/Head

Other

Cloudflare NGINX as reverse proxy
Next.js 2.0.0-beta.17
Node.js v7.3.0

Source

shaykyasin

👍3

Most helpful comment

In my case <noscript> was causing this error. To avoid this I had to use dangerouslySetInnerHTML:

...
const staticMarkup = ReactDOMServer.renderToStaticMarkup(markup)

return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />

(Above solution found in https://github.com/zeit/next.js/pull/2767/files)

caspg on 18 Aug 2017

👍2 🎉1

All 22 comments

This looks like a hidden bug in React itself: https://github.com/facebook/react/issues/7093

thangngoc89 on 10 Feb 2017

👍1

@arunoda How is this a question and not a bug? Just creating a page with a next/Head causes the error to pop up.

shaykyasin on 13 Feb 2017

👍2

@shaykyasin I couldn't reproduce this. This seems like something with the way you build the app.
We need a way to reproduce to mark this as a bug.
Could you send us a sample repo?

arunoda on 13 Feb 2017

I'm experiencing the same issue. Like @shaykyasin, it doesn't happen when running a local server. However, I also see the problem when the page is requested via AJAX.

aesopwolf on 14 Feb 2017

@arunoda I encountered this issue today. Here is my repo: [email protected]:holechihieu/pp.git

hieuhlc on 9 Apr 2017

Experiencing the same issue here.

matzero on 14 May 2017

This error reveal after switch-over to https.

MaxSvargal on 14 May 2017

Reproduction:

https://out-jwcahmxnmn.now.sh/

Flashes the correct UI, then gives "An unexpected error has occurred."

Translating the React console error, you get "Unable to find element with ID 10."

https://github.com/lorensr/graphql-leaderboard/tree/8709b39ef7cbffbe931387be2811f2a0332e3609

npm run build
now

lorensr on 20 May 2017

@arunoda here are the data-reactids in development:

lorensr on 20 May 2017

Mine was due to invalid HTML—fixed by adding a <tbody> inside my <table>

lorensr on 20 May 2017

👍1

I am also getting this bug, but I was able to remove it somehow by doing this:

Unable to find:
screen shot 2017-06-10 at 12 53 00 pm

Totally can find:
screen shot 2017-06-10 at 12 52 00 pm

🤷‍♂️

JulianKnodt on 10 Jun 2017

I was getting this error only when I rendered my component from the server. In my case it was because I forgot to add 'jsx' to one of the style tags.

AlvaroBernalG on 7 Jul 2017

I might be getting this bug due to style tags too. I was ommitting jsx attribubute because I wanted to use css from other file or variable. Everything worked until today. I am searching for fix. @AlvaroBernalG do you have any suggestion related to these style tags?

kunokdev on 10 Jul 2017

Lets close this as it's not reproduceable. Will re-open if it's reproduceable.

timneutkens on 10 Jul 2017

@kunokdev Apologies for the delay. What I am currently doing is having a theme.js file
where I basically export all theme related individual styles (colours, font-families, font-size, shadows), as well as a one variable with all the global classes that I append to my Layout component using the global attribute. Each of my component has its own specific styles that are defined using the scoped style tag.
But then again, I am not really sure if this is the most efficient approach.. I am currently in the process learning through a pet project.

AlvaroBernalG on 14 Jul 2017

I caused this error when server rendering by having li as a descandant of another li. If you have this warning in development, this error will occur when attempting server rendering.

StevePavlin on 18 Jul 2017

👍2

In my case <noscript> was causing this error. To avoid this I had to use dangerouslySetInnerHTML:

...
const staticMarkup = ReactDOMServer.renderToStaticMarkup(markup)

return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />

(Above solution found in https://github.com/zeit/next.js/pull/2767/files)

caspg on 18 Aug 2017

👍2 🎉1

I'm having this error and it's only happening on the deployed prod app but doesn't appear locally (even warnings)

deejayxd07 on 31 Aug 2017

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>

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

lfender6445 on 17 Sep 2017

Seemed to happen for me only when I was hot-linking to an image. Commented out the image, went away. Now the image is being served from /static/ so we'll see if it comes back.

YoungElPaso on 28 Sep 2017

in my case , i used html p (p in p) tag nested and in webpack dev server works without error , when i build
the project and run the code in express and ssr (server side rendering) this error logged.
even though disable ssr in this component , problem not solved .
just change parent tag to <section> solved the problem.

ahmdp on 2 Oct 2017

❤1

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.