Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Let there be less divs

See original GitHub issue

Now that CSS grid is out and we’re finally able to implement sites semantically and lay out stuff nicely without enormous amounts of divs and hacks it would be very nice to see this principle followed in frameworks such as next.js. Unfortunately that’s not the case at the moment.

I’m currently following the tutorial and I already have…

<body>
  <div>
    <div id="__next">
      <div data-reactroot="" data-reactid="1" data-react-checksum="315191458">
        <!-- my content full of wrapper divs because of react.js -->
      </div>
      <div id="__next-error"><!-- guess this exists only in dev mode -->
    </div>
  </div>
  <div>
    <script>...</script>
    ...
  </div>
  <script>...</script>
</body>

Expected Behavior

I think only div we should have is the react root div.

Current Behavior

I see a few unnecessary looking divs.

Steps to Reproduce (for bugs)

Follow the first tutorial until it works.

Issue Analytics

State:
Created 6 years ago
Reactions:28
Comments:8 (3 by maintainers)

Top GitHub Comments

7reactions

timneutkenscommented, Feb 1, 2018

Fixed in canary. <> can’t be used yet because it requires the beta version of babel. Which we’ll integrate in next.js v6.

7reactions

jul-shcommented, Nov 11, 2017

would recommend a small edit to the workaround by @lancejpollard:

/* normalize divs surrounding the content*/
      body > div:first-child,
      #__next,
      #__next > div,
      #__next > div > div {
        height: 100%;
      }

This is to avoid the #__next-error div blowing up to 100% as well.

This is pretty darn hacky though. 😦 I would rlly appreciate it if the div inside of body could at least have a className, so I don’t have to try to target it using body > div:first-child which feels bad to do