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.

DOM mismatch when using mq-layout

See original GitHub issue

nuxt.config.js:

mq: {
  defaultBreakpoint: 'md',
  breakpoints: {
    sm: 640,
    md: 1250,
    lg: Infinity
  }
},

using in a component.vue:

<mq-layout mq="sm">content for sm breakpoint</mq-layout>

Then i get an error:

If i change defaultBreakpoint to sm then it works, but if i use <mq-layout mq="md">content for md breakpoint</mq-layout> then i get DOM mismatch error again.

Issue Analytics

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

Top GitHub Comments

1reaction

vanhoofmaartencommented, Jun 16, 2020

With pleasure.

Is this issue related to #56? If so, I can close that one off too.

Good luck with your project!

0reactions

avxkimcommented, Jun 16, 2020

Guess, it was my own issues, i restarted IDE and errors are gone, thanks for your time.

Top Results From Across the Web

Layout mismatch between development & build in Gatsby

The problem is that the render is correct in gatsby develop, But when I gatsby build, the second item of the airtable data...

DOM diff and component stack in SSR hydrate mismatch ...

Renders DOM diff and component stack showing visually the location where the hydration failed. Example warning with a diff (see the fixtures/ssr and...

Debugging and fixing hydration issues - somewhat abstract

To exclude a component that needs layout effects from the server-rendered HTML, render it conditionally with showChild && <Child /> and ...

react-hydration-error

An example of this is using window in a component's rendering. Another example: Invalid HTML may cause hydration mismatch such as div inside...

Understand and solve hydration errors in Vue.js

If the server and client of the DOM have states that differ at the time of hydration, nodes may be missing or added,...