New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Next13: unwanted div element added inside layout #42345
Comments
After upgrading to next |
I've put a video to show what I mean but adding intermediate div elements between layout and pages causes to not be able to use nested layouts since you can't style the nested layout because it's gonna be rendered inside a bunch of other divs and what you meant to be placed in place of the |
This is a known Issue and is being discussed in #41745 (reply in thread) Background: If you navigate inside nested layouts, Next.js needs to restore the scroll position or scroll the loaded element into view. Nevertheless React currently has no API to select the DOMNodes of a React subtree (inside strict mode), because a subtree could be a string or even a boolean. So the current solution is to wrap the subtree inside a Afaik the React Team and Next.js Team is aware of this issue. Hopefully it will be resolved in the future. |
@HaNdTriX couldn't Nextjs register that ref on the first child of the |
If that component has a DOM Node to reference and if React would expose an API like findDOMNode that might be possible. Please note that this issue is not trivial, because of the way the DOM works. JSX supports all kinds of Node DOMNode like React Components (strings, booleans, arrays, undefined, etc.). These component results are currently not referenceable using traditional DOM APIs. function MyComponent() {
return <>I am a string, you can\'t reference me via traditions DOM APIs</>
} The DOM only allows us to query components in a performant way. If you want to query a specific TextNode (e.g. 3rd word in a sentence) or an HTML comment things get complicated and slow. Disclaimer: I am not part of Next.js Core Team |
How about this |
Hi, [data-nextjs-scroll-focus-boundary] {
display: contents;
} it will not work for older browsers unfortunately. |
I'm going to close this issue as this is behaving as intended for right now. As said in #41745 (reply in thread) we're planning to remove it in the near future. |
It was fixed in the last canary |
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
warn - Latest canary version not detected, detected: "13.0.0", newest: "13.0.2-canary.0".
Please try the latest canary version (
npm install next@canary
) to confirm the issue still exists before creating a new issue.Read more - https://nextjs.org/docs/messages/opening-an-issue
What browser are you using? (if relevant)
Chrome
How are you deploying your application? (if relevant)
No response
Describe the Bug
I can confirm that for every nested layout that I've used, there is a parent div which
children
is wrapped inside them. I've checked my code I don't return that<div>
so I suspect is wrappingchildren
around anotherdiv
.Expected Behavior
I expect it to be wrapped inside
Fragment
(if necessary) because,Link to reproduction
yarn create next-app nextjs-server-components --experimental-app
To Reproduce
Check the default Next.js rendered HTML for path
/
, there is a<div>
aroundpage container
which is neither present inside the defaultlayout
nor inside thepage
The text was updated successfully, but these errors were encountered: